CSS

#box1 { width:1000px; }
#box1>#box2 { width:50%; }

例えばこんな時、document.getElementById(“box2”).clientWidth や $(“#box2”).width()で値を取得すると、#box2の実際の値である500pxとして取得されてしまいます。

Javascript

console.log(document.getElementById("box2").clientWidth);
console.log($("#box2").width());
// [結果]
// 500

CSSで設定された値（50％）をそのまま取得したい時は、document.styleSheetsを使用します。
不要な要素は省略しているけど、こんな感じでCSSファイルごとに配列化されて格納されます。

Javascript

console.log(document.styleSheets);

// [結果]
Array (
    [0] : { // CSSファイルごとに配列に格納される
        cssRules : Array(
            [0] : { // スタイル要素ごとに配列に格納される
                selectorText : "#box1",
                style : {
                    width:"1000px",
                }
            },
            [1] : {
                selectorText : "#box1>#box2",
                style : {
                    width:"50%",
                }
            }
        )
    }
)

console.log(document.styleSheets[0].cssRules[1].style.width);
// [結果]
// 50%

※<link href>によって外部から読み込まれたCSSファイルは、GoogleChromeではサーバー上で動作させないとcssRulesがnullになってしまいます。ローカルで、かつChromeでテストする場合はローカルサーバーで動作させてください。

上から順に配列化される都合上、CSSを追加したり編集したりすることで添字も変わってしまうので、上記のような取得の仕方は賢明ではありません。
多少汎用的な関数にするならこんな感じでしょうか。

Javascript

function getWidth(selector) {
    var w;
    for(var i=document.styleSheets.length-1; i>=0; i--) {
        var r = document.styleSheets[i].cssRules;
        for(var j=r.length-1; j>=0; j--) {
            if(r[j].selectorText==selector) {
                w = r[j].style.width;
                break;
            }
        }
    }
    return w;
}
console.log(getWidth("#box1>#box2"));
// [結果]
// 50%

より汎用的にパッケージ化されたjquery.stylesheets.jsというjQueryプラグインもあります。
https://github.com/f0r4y312/jquery-stylesheet