javascript - CSSはパーセントをピクセルに変換します

Question

CSSでパーセントで表された指定された幅と高さの「div」要素があります。
JSスクリプトで幅と高さをピクセルで表したものを取得したいと思います。それも可能ですか？

Answer 1

使用できます

el.clientHeight;
el.clientWidth;

（el要素への参照です）

デモ

これらのプロパティは、MSIEDHTMLオブジェクトモデルで最初に導入されたことに注意してください。最近では、CSSOM View Module、W3C Working Draft、2008年2月22日に標準化されました。

これらのプロパティは広くサポートされていました。ただし、MSに準拠していない古いブラウザがそれらをサポートしていない可能性があります。そのような場合は、次を使用できますgetComputedStyle。

function findSize(el, size) {
    /* size must be 'width' or ' height' */
    return window.getComputedStyle
        ? getComputedStyle(el,null).getPropertyValue(size)
        : el['client'+size.substr(0,1).toUpperCase() + size.substr(1)] + 'px';
}
findSize(el, 'width');
findSize(el, 'height');

デモ

getComputedStyleand clientHeight/ wayのブラウザサポートはclientWidth少なくとも次のとおりです。

                 | IE  | Firefox | Chrome | Safari | Opera
-----------------|-----------------------------------------
getComputedStyle | 9   | <=3     | 1      | <=4    | <=10
client           | <=5 | <=3     | 1      | <=4    | <=10

^{（<=n少なくともバージョンからはサポートされてnいますが、以前のバージョンをテストできなかったことを意味します）}

Answer 2

これに使用window.getComputedStyle()する

<div style="wdith:50%">50% width</div>​​​​​​​​​​​​​

(function() {
    var div = document.getElementsByTagName("div")[0];

    console.log(window.getComputedStyle(div, null)["width"]);
}())​

フィドル

すべての主要なブラウザとIE9+でサポートされています。IEの下位バージョンについては、をご覧ください。currentStyle

Answer 3

これを見てください。

jQueryキーは次のとおりです。

$("#div").width();

Answer 4

jQueryキーは次のとおりです。

$("#div").width($("#div").width());