How to get the width of an element using pure javascript

Question

How to get the width of an element using pure javascript

Navigation

#1 by (0 votes)

-1

I need to get the width value of this element using pure javascript:

varelemento=document.getElementsByClassName("iframeChat")[0];

I searched and found several ways to get the width value and everyone is giving the wrong value, the value varies according to the size of my screen.

Codes I tested:

var width = elemento .clientWidth;
var width = elemento offsetWidth
var width = elemento.getBoundingClientRect().width;
var positionInfo = element.getBoundingClientRect();
var width = positionInfo.width;

In all my tests the value was the same.

Note: Each line has been tested separately.

An example with Jquery:

var width = $(".iframeChat").css('width');

Element Css:

.iframeChat{
    border-radius: 5px 5px 0px 0px;
    border:3px solid;
    border-color: var(--main-bg-color);
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 200px;
    margin-bottom: -503px;
}

javascript

asked by anonymous 29.12.2017 / 19:12

1 answer

Problem in return json php I can not import a project into NetBeans

score 0 · Answer 1

You need to get the calculated value, which may actually be different from the value assigned via code. This is because styles can be overwritten by other style rules when rendering the page.

Try the code below:

var elemento = document.getElementsByClassName("iframeChat")[0];
var width = window.getComputedStyle(elemento, null).getPropertyValue("width");

More information