How to get width of element with javascript?

Question

I am trying to compare width of one element with "100%" with the below code. I wrote this code but did not work. Width of element is 100% . Please advice

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

oh Sorry. I think best way to check is if the parent width is same to this element. I dont think you can do that 100% as a string — Joy Biswas
– Joy Biswas, Commented Feb 22, 2016 at 12:47

BenM · Accepted Answer · 2016-02-22 12:52:15Z

5

Your code is working correctly, but offsetWidth returns the physical pixel width of the element on the screen. Since you're doing a strict equality comparison using ===, the if() block never evaluates to true; offsetWidth returns an integer to start, and will never append the % value.

For example, see this jsFiddle demo -- the <input />'s value becomes an integer.

If you absolutely need to have the width as a percentage value, you'll need to access the element's CSS definitions using the HTMLElement.style property as follows:

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

jsFiddle Demo

Ultimately, your if() block will become:

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

edited Feb 22, 2016 at 12:52

answered Feb 22, 2016 at 12:47

BenM

53.3k26 gold badges116 silver badges172 bronze badges

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

Collectives™ on Stack Overflow

How to get width of element with javascript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related