如何使用 javascript 获取元素的宽度？

Question

我正在尝试使用以下代码将一个元素的宽度与“100%”进行比较。我写了这段代码但没有用。元素的宽度是 100% 。请指教

if (document.getElementsByClassName("progress-bar")[0].offsetWidth ==="100%") {
    clearInterval(r1);
    clearInterval(r2);
    clearInterval(r3);
}

Answer 1

您的代码工作正常，但是 offsetWidth returns 元素在屏幕上的物理像素宽度。由于您正在使用 === 进行严格的相等比较，因此 if() 块 never 的计算结果为真； offsetWidth returns 一个整数开始，永远不会附加 % 值。

例如，看这个 jsFiddle demo -- <input /> 的值变成一个整数。

如果您绝对需要将宽度作为百分比值，则需要使用 HTMLElement.style 属性访问元素的 CSS 定义，如下所示：

document.getElementsByClassName("progress-bar")[0].style.width;

jsFiddle Demo

最终，您的 if() 块将变为：

if( document.getElementsByClassName("progress-bar")[0].style.width == '100%' ) 
{
    clearInterval(r1);
    clearInterval(r2);
    clearInterval(r3);
}

如何使用 javascript 获取元素的宽度？

How to get width of element with javascript?

javascript

width