CODEWITHSUNDEEP
javascriptcss
Ammar Alyousfi
Ammar Alyousfi

Reputation: 4372

Calculating element width in JavaScript gives wrong results

There is a simple div in the document with some styles. Its width is not set in HTML nor in CSS. I tried to calculate its actual width in JavaScript using different methods:

but none of them returned the actual width which can be seen in Chrome Developer Tools.

Here is a code that demonstrate this issue:

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)
#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;
}
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400" rel="stylesheet">
<div id="resume-header">
    Resume
</div>

Please note that in the above snippet, the calculated width is sometimes correct and sometimes wrong, while in Chrome, it is always wrong.

Upvotes: 10

Views: 6822

Answers (1)

Ammar Alyousfi
Ammar Alyousfi

Reputation: 4372

The Problem

It seems that sometimes the JavaScript code that calculates the width is executed before the web page is ready and the layout is calculated; I think that not setting the width property in the CSS file causes this issue.

Solution

So the solution is to wrap the JavaScript code in an event listener on window that listens for "load" event:

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

Safari Case

However, this doesn't work with Safari due to its way of loading and displaying web pages. To work around this, add this line of code before the event listener described above:

window.scrollBy(0,1);

More info on this behavior of Safari and its workaround: Here.

Working Code

Here is the code with the above fixes:

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);
});
#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;
}
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,400" rel="stylesheet">
<div id="resume-header">
    Resume
</div>

Note: This solution has been tried on Chrome, Safari, and Chrome for mobile.

Upvotes: 13

Related Questions