如何在JS中获得元素的实际宽度？

Question

各位开发人员，

我有一些控件，它是以下一个，其中一些比屏幕大：

但是，如果我使用JS或jQuery得到宽度，我总是得到相同的值300px。

如果你仔细看第一个屏幕说：406px，你知道为什么我不能得到正确的价值？

这是我上面展示的代码。

$($('.mdl-textfield__input')[0]).outerWidth()
$($('.mdl-textfield__input')[0]).width()

此外，您可以从这里访问该网站：

https://fanmixco.github.io/toastmasters-timer-material-design

重要的细节，这是Chrome中的iPhoneX视图。

Answer 1

在我看来，你正在使用CSS转换。尝试类似的东西 $(".mdl-textfield__input")[0].getBoundingClientRect().width