1

以下のようなgetElementsByClassNameメソッドを使用して、特定のCSSクラスの属性値のリストを出力しようとしました。

<html>
    <head>
        <style>
            .toto {
                width:200px;
                height:50px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="lol" class="toto"></div>
        <script language="javascript" type="text/javascript">
            var toto = document.getElementsByClassName('toto');
            if (toto) {
                for (int i; i < toto.length; i++)
                    document.write(toto[i]);
            }
        </script>
    </body>
</html>

ただし、すべての場合でtoto.length=1です。「200px」、「50px」、「red」の値を出力したいと思います。誰かが私を助けることができますか？よろしくお願いします。

4

3 に答える 3

1

あなたは何をしているのか誤解していると思いますgetElementsByClassName。

getElementsByClassNameクラスが割り当てられているすべてのHTML要素（タグ）を返します。この例では、これが1つdivであるため、toto.length == 1。

特定のCSSセレクターのプロパティを列挙するためのDOMメソッドを知りません。ただし、FireBugやChromeの開発者ツールなどのツールを使用して、要素を検査し、どのCSSルールが適用され、どのプロパティが変更されているかを確認できます。

于 2013-01-14T12:14:35.363 に答える
0

JavaScriptを介して要素への参照を取得する場合、通常、要素のstyle-attributeを使用してインラインCSSを介して設定されたCSSプロパティのみを取得できます。CSSを介して適用されたプロパティは、その要素のプロパティとして要素を介して読み取ることはできません。

ただしwindow.getComputedStyle()、ループ内で使用して、要素に適用された最終的な計算されたCSSを取得できます。

あなたの場合、それは次のようになります：

var toto = document.getElementsByClassName('toto');
if (toto) {
   for (int i; i < toto.length; i++)
      // Log the height of each element
      console.log(getComputedStyle(toto[i], null).getPropertyValue("height"));
   }
}

ブラウザのサポートが多少制限されていることに注意してください（IE9 +）。

于 2013-01-14T12:16:36.427 に答える
0

複数の要素を返すことに関して他の人がまだ指摘していることを繰り返すことはしませんgetElementsByClassNameが、特定の要素（多くの要素）にあるものではなく、自分のスタイルにあるものを知りたい場合は、あなたのアプローチは最善ではないと思います通常、スタイルが適用されます）。

これは、クラスを持つ要素がなくても機能するソリューションtotoです。

function findStyle(selector) {
  for (var i=document.styleSheets.length; i-->0;) {
    for (var j = document.styleSheets[i].cssRules.length; j-->0;) {
      var r = document.styleSheets[i].cssRules[j];
      if (r.selectorText==selector) return r;
    }
  }
}
var style = findStyle('.toto');
console.log(style.style.width, style.style.height, style.style['background-color']);

これはコンソールにログオンします200px 50px red

デモンストレーション

于 2013-01-14T12:20:21.387 に答える