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

Question

各位开发人员，

我有一个带有一些控件的控件，如下所示，其中一些控件比屏幕还要大：

​

​

但是，如果使用JS或jQuery获得宽度，则始终得到相同的值300 if。

​

​

​

​

如果你仔细地看到第一个屏幕上写着:406 if，你知道为什么我不能得到正确的值吗？

下面是我上面展示的代码。

$($('.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