在JavaScript中计算元素宽度会产生错误的结果

Question

文档中有一个简单的div，其中包含一些样式。它的width未在HTML中设置，也未在CSS中设置。我尝试使用不同的方法在JavaScript中计算其实际宽度：

• offsetWidth
• clientWidth
• getBoundingClientRect().width
• getComputedStyle(element).getPropertyValue('width')

但是他们都没有返回Chrome Developer Tools中可以看到的实际宽度。

以下是演示此问题的代码：

＆＃13;

＆＃13;

var resumeHeader = document.querySelector('#resume-header');
var resumeHeaderComputedWidth = getComputedStyle(resumeHeader, null).getPropertyValue('width');
console.log(resumeHeaderComputedWidth)
console.log(resumeHeader.offsetWidth);
console.log(resumeHeader.clientWidth)
console.log(resumeHeader.getBoundingClientRect().width)

＆＃13;

#resume-header {
        display: inline-block;
        background-color: #F5D061;
        padding: 2px 6px;
        font-weight: bold;
        font-size: 14px;
        position: relative;
        top: 25px;
        left: 0;
        transition: width 1s ease;
        font-family: "Merriweather", serif;
        line-height: 1.8;
        letter-spacing: 1px;
        box-sizing: border-box;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400" rel="stylesheet">
<div id="resume-header">
    Resume
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，在上面的代码段中，计算出的宽度有时是正确的，有时是错误的，而在Chrome中，它总是错误的。

Answer 1

问题

有时，在网页准备好并计算布局之前，会执行计算宽度的JavaScript代码;我认为不在CSS文件中设置width属性会导致此问题。

解决方案

因此，解决方案是将JavaScript代码包装在window上侦听"load"事件的事件侦听器中：

addEventListener("load", function () {
    var resumeHeader = document.querySelector('#resume-header');
    var resumeHeaderComputedWidth = getComputedStyle(resumeHeader, null).getPropertyValue('width');
    console.log(resumeHeaderComputedWidth)
}

Safari Case

然而，由于其加载和显示网页的方式，这对Safari不起作用。要解决此问题，请在上述事件侦听器之前添加以下代码行：

window.scrollBy(0,1);

有关Safari的这种行为及其解决方法的更多信息：Here。

工作代码

以下是具有上述修复的代码：

＆＃13;

＆＃13;

window.scrollBy(0,1);
addEventListener("load", function () {
    var resumeHeader = document.querySelector('#resume-header');
    var resumeHeaderComputedWidth = getComputedStyle(resumeHeader, null).getPropertyValue('width');
    console.log(resumeHeaderComputedWidth);
    console.log(resumeHeader.offsetWidth);
    console.log(resumeHeader.clientWidth);
    console.log(resumeHeader.getBoundingClientRect().width);
});

＆＃13;

#resume-header {
        display: inline-block;
        background-color: #F5D061;
        padding: 2px 6px;
        font-weight: bold;
        font-size: 14px;
        position: relative;
        top: 25px;
        left: 0;
        transition: width 1s ease;
        font-family: "Merriweather", serif;
        line-height: 1.8;
        letter-spacing: 1px;
        box-sizing: border-box;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400" rel="stylesheet">
<div id="resume-header">
    Resume
</div>

＆＃13;

＆＃13;

＆＃13;

注意：此解决方案已在Chrome，Safari和Chrome移动版上试用过。