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 个答案: