Calculating element width in JavaScript gives wrong results

Question

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:

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

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.

Aren't they window properties? How can I use them in this case? — Ammar Alyousfi
– Ammar Alyousfi, Commented Oct 16, 2017 at 14:44
They are also jQuery functions that can be used on any element to get the height with/without margin, border etc. Ref: innerWidth and outerWidth — FluffyKitten
– FluffyKitten, Commented Oct 16, 2017 at 14:49
I am using plain JavaScript on my web page. I don't want to add jQuery overhead, especially that the problem can be solved without that :) — Ammar Alyousfi
– Ammar Alyousfi, Commented Oct 16, 2017 at 14:52
It was just a suggestion, which is why I only added it as a comment rather than an answer. But you had listed every other width, so I thought you might like to go for the full set :) — FluffyKitten
– FluffyKitten, Commented Oct 16, 2017 at 14:55

Ammar Alyousfi · Accepted Answer · 2017-10-16 15:24:02Z

13

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.

edited Oct 16, 2017 at 15:24

answered Oct 16, 2017 at 14:35

Ammar Alyousfi

4,4325 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Álvaro Touzón Over a year ago

good response, becose in fiddle always give'm same value fiddle.jshell.net/ahketzLq

neonwatty Over a year ago

works for me in chrome - I was using DOMContentLoaded to no avail - load (waiting for styles to load) was key.

Collectives™ on Stack Overflow

Calculating element width in JavaScript gives wrong results

1 Answer 1

The Problem

Solution

Safari Case

Working Code

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The Problem

Solution

Safari Case

Working Code

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related