1 
<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.length0？因为我定义了 3 个属性，所以我希望它是 3

4

1 回答 1

3

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

来自MDN：

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

您可以使用以下命令将所有样式应用于元素window.getComputedStyle(element)：

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

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

于 2013-06-25T16:24:58.670 回答