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 に答える