从样式设置为 % 的元素获取宽度（以像素为单位）？

Posted 2023-05-07

【中文标题】从样式设置为 % 的元素获取宽度（以像素为单位）？

【英文标题】：Get width in pixels from element with style set with %?

【发布时间】：2012-08-09 07:13:32

【问题描述】：

我有这个元素：

<div style="width: 100%; height: 10px;"></div>

我想得到它的宽度（以像素为单位）。我刚试过这个：

document.getElementById('banner-contenedor').style.width

返回100%。是否可以使用 javascript 实际获取元素的宽度（以像素为单位）？

【问题讨论】：

你必须使用 computedstyle 或 jquery

很简单***.com/a/294273/6521116

【参考方案1】：

document.getElementById('banner-contenedor').clientWidth

【讨论】：

目前非标准。但它适用于大多数浏览器，并且包含在 CSSOM View Module 草案中。

如果clientWidth和offsetWidth都返回0，怎么办？

真的有人从中得到像素大小吗？

【参考方案2】：

您想获得计算出的宽度。试试看：.offsetWidth

（即：this.offsetWidth='50px' 或 var w=this.offsetWidth）

您可能还喜欢 SO 上的this answer。

【参考方案3】：

在原版 JS 中提出的问题没有一个答案，我想要一个原版答案，所以我自己做了。

clientWidth 包括填充，offsetWidth 包括其他所有内容 (jsfiddle link)。你想要的是得到计算的样式（jsfiddle link）。

function getInnerWidth(elem) 
    return parseFloat(window.getComputedStyle(elem).width);

编辑：getComputedStyle 是非标准的，可以以像素以外的单位返回值。如果元素有滚动条，一些浏览器还会返回一个值，该值会考虑滚动条（这反过来会给出与 CSS 中设置的宽度不同的值）。如果元素有滚动条，则必须通过从offsetWidth 中删除边距和填充来手动计算宽度。

function getInnerWidth(elem) 
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);

话虽如此，根据我目前的经验，这可能不是我建议遵循的答案，我会求助于不太依赖 JavaScript 的方法。

【讨论】：

如果宽度 css 是 100%，这不起作用/有问题；

@towry 想解释一下问题所在，以便我可以在需要时更正我的答案？这是我五年前写的。

我几天前刚遇到这个问题，假设初始css是width: 100%，然后我使用getComputedStyle获取像素宽度，但它总是返回空值，但在超时回调中，就可以得到一个正确的像素数值。

@towry，猜测您的问题是在渲染 DOM 之前调用 getComputedStyle。我自己也遇到过这个问题，那就是它什么也没返回。解决方案是等到 DOM 准备好。我通过将一个函数附加到document.addEventListener('readystatechange', myfunction); 来做到这一点，我的函数在对getComputedStyle 执行任何操作之前检查document.readyState === 'complete'。从那以后再也没有问题。

【参考方案4】：

您可以使用offsetWidth。请参阅此 post 和 question 了解更多信息。

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

div border: 1px solid #F00;

<div style="width: 100%; height: 10px;"></div>

【参考方案5】：

试试 jQuery：

$("#banner-contenedor").width();

【讨论】：

这会返回以 % 为单位的宽度，只是没有 % 符号。

【参考方案6】：

这个 jQuery 对我有用：

$("#banner-contenedor").css('width');

这将为您提供计算出的宽度

http://api.jquery.com/css/

【讨论】：

这给出了 % 而不是 px 值

【参考方案7】：

yourItem.style['cssProperty']

这样就可以动态调用属性字符串