javascript - CSS将百分比转换为像素

Question

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

Answer 1

您可以使用

el.clientHeight;
el.clientWidth;

（el是对元素的引用）

演示

请注意，这些属性最初是在 MS IE DHTML 对象模型中引入的。最近，它们在CSSOM 视图模块中被标准化，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');

演示

浏览器对getComputedStyle和clientHeight/clientWidth方式的支持至少是：

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

^{（<=n意味着至少从 version 支持它n，但我无法测试以前的版本）}

Answer 2

Use window.getComputedStyle() for this

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

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

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

fiddle

Supported by all major browsers and IE9+. For lower versions of IE have a look at currentStyle

Answer 3

看看这个。

jQuery 键是：

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

Answer 4

jQuery 键是：

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