为什么javascript样式属性不能按预期工作？

Question

<html>
   <head>
       <style type="text/css">
       #wow{
          border : 10px solid red;
          width: 20px;
          height: 20px;

       }
       </style>
   </head>
   <body>
      <div id="wow"></div>
      <script>
        var val = document.getElementById("wow");
        alert(val.style.length);
      </script>
   </body>
</html>

这是我的代码，为什么val.style.length 0？ 因为我定义了3个属性，我希望它是3

Answer 1

元素的style属性仅反映内联样式。 它本质上是一种获取（并确实设置）内联样式的方法。

来自MDN ：

[ style属性]对于一般地学习元素的样式没有用，因为它只表示元素的内联样式属性中设置的CSS声明，而不是来自其他地方的样式规则的那些，例如节中的样式规则，或者外部样式表。

您可以使用window.getComputedStyle(element)获取应用于元素的所有样式：

alert(window.getComputedStyle(val).length);

但是，这可能不会达到您想要的效果，因为它提供了元素上的所有样式属性，即使它们仍然是默认属性。 在我的浏览器（Chrome，FWIW）中，这意味着它总是返回285 。 这不应该是一个惊喜。 浏览器有一个“内置”样式表，毕竟它提供了所有元素的默认值。

为什么javascript样式属性不能按预期工作？

问题描述

1 个解决方案

解决方案1
3 已采纳 2013-06-25 16:24:58

为什么javascript样式属性不能按预期工作？

问题描述

1 个解决方案

解决方案1 3 已采纳 2013-06-25 16:24:58

解决方案1
3 已采纳 2013-06-25 16:24:58