jQuery .width（）函数无法准确返回<div>标记</div>中的文本宽度

Question

我试图获取div标签中包含的一行文字的宽度。但是，当我比较jQuery＆＃39; s .width返回的宽度值时，它与chrome的元素查看器显示的值不同。

控制台打印值为238px，但Chrome的元素查看器显示283px

div标签是自定义聚合物元素的阴影DOM的一部分，这可能是原因吗？

这个问题有什么解决方案吗？

这是文本行的标记

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

javascript调用jQuery .width()函数

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

谢谢！

Answer 1

使用CSS jQuery method，仅指定您想要的CSS值

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

仅指定第一个参数获取值，在.css（）中设置第二个值将覆盖第一个参数中指定的css属性的值。

也许你有一些box-sizing设置正在改变渲染值

Answer 2

您还可以尝试使用innerWidth（）/ outerWidth（）方法来获取精确的宽度..

只需写下：

 $('div').outerWidth():

可以找到更详细的解释in this answer