Question

我有“div”元素，其中指定的宽度和高度以CSS的百分比表示我想通过JS脚本获得以像素表示的宽度和高度。它甚至可能吗？

Answer 1

您可以使用

el.clientHeight;
el.clientWidth;

（el是对元素的引用）

Demo

请注意，这些属性最初是在MS IE DHTML对象模型中引入的。最近，他们在CSSOM View Module，W3C 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');

Demo

浏览器支持getComputedStyle和clientHeight / 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"]);
}())

fiddle

所有主流浏览器和IE9 +都支持。对于较低版本的IE，请查看currentStyle

Answer 3

查看This。

jQuery密钥是：

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

Answer 4

jQuery密钥是：

$（ “＃DIV”）宽度（$（ “＃DIV”）宽度（））;

CSS将百分比转换为像素

4 个答案: