The jQuery .width () function does not exactly return the width of the text in & lt; Div & gt; Mark

advertisements

I am trying to get the width of a line of text enclosed within a div tag. However when i compare the width value returned by jQuery's .width, it is different from the values shown by chrome's element viewer.

The console printed value is 238px, however the chrome's element viewer shows 283px

The div tag is part of the shadow DOM of a custom polymer element, could this be the reason?

Is there any solution to this issue?

This is the tag for the line of text

 <div id = "label" class={{buttonLoc}}>{{label}}</div>

The javascript calling the jQuery .width() function

console.log($(this.$.label).width());

Thanks!


Use the CSS jQuery method, specifying only the CSS value you want

var width = $('div').css("width"):
console.log(width);

Specifying only the first parameter gets the value, setting a second value in .css() will overwrite the value of the css property specified in the first parameter.

Maybe you have some box-sizing set which is changing the rendered value