如何更改width / height元素，该元素具有子类中的设置

Question

我的网络应用程序中nav元素的样式出了问题。

正如您所看到的，如果要关注元素nav#menu.horizontal-menu - 我可以在Chrome中看到该元素的实际宽度/高度。

BUT！当我尝试通过id - menu在JavaScript中获取该元素时（因为您可以在屏幕底部看到nav标记的标记声明）：

它没有宽度或高度值...... 我理解，这可能是因为：

`nav#menu.horizontal-menu` != `nav`

但是，这只是我的建议......我已经尝试过使用这两个功能：

• getElementsByClassName方法（）
• querySelector（）

但是......也没有成功，因为你可以在屏幕上看到，有什么不对，以及如何从元素中获得所需的实际宽度和高度选项？

谢谢！

Answer 1

我认为你正在寻找这个答案：

How do I retrieve an HTML element's actual width and height?

.style.width仅检查元素的style属性中填充的内容。 OffsetWidth可能会起作用......

Answer 2

那是因为没有为它定义宽度和高度样式。

要计算渲染的宽度和高度，请使用a.offsetWidth和a.offsetHeight。这些是DevTools在悬停时显示的值。

Answer 3

你试过了吗？

var width  = document.getElementById('foo').offsetWidth;
var height = document.getElementById('foo').offsetHeight;

对于跨浏览器兼容性，我建议您使用jQuery