Question

我希望使用JavaScript获取元素的高度，但我想要该值，即使它应用于<style>标记，而不仅仅是内联。

   <style>
     #test{height:100px;}
   </style>
   <div id="test"></div>
   <script>

   alert(document.getElementById("test").style.height);


   <script>

上面的alert没有显示任何内容，因为它只是获取内联样式，而不是整个样式。如何才能访问元素的所有样式？

Answer 1

如果您想要完整的计算样式，请使用：

window.getComputedStyles(document.querySelector('#test'));

然后去：

window.getComputedStyles(document.querySelector('#test')).height;

即使您指定百分比高度，也会以px为单位给出高度。

另外，您可以使用：

document.querySelector('#test').clientHeight;

这包括填充，但取决于您的需要。阅读更多：

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

获得元素的风格

1 个答案: