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

Question

我试图将一个元素的宽度与“100％”与下面的代码进行比较。我写了这段代码，但没有用。元素的宽度为100%。请建议

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

Answer 1

您的代码工作正常，但offsetWidth会返回屏幕上元素的物理像素宽度。由于您使用===进行了严格的相等比较，因此if()块从不评估为true; offsetWidth返回一个要开始的整数，并且永远不会附加%值。

例如，请参阅此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);
}