web-dev-qa-db-ja.com

DOMスタイルを使用してJavaScriptでCSSクラスプロパティを取得または変更する

私の目的は、各データエントリをIDまたは名前で個別にアドレス指定せずに、テーブルの列の背景色を変更することです。これを行うにはいくつかの方法があることを知っています。正確に3つ試してみましたが、それぞれに問題があります。単純さと明快さのために、この質問では、DOMで element.style.backgroundColor オブジェクトを使用して正常に実行する方法を尋ねています。これが私のHTMLです。

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="tester.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
        <script type="text/javascript" src="tester.js"></script> 
    </head>
    <body>
    <button type="button" onClick="testerFunction()">Test</button>
        <table>
            <tr>
                <th class="col1">Column 1 Header</th>
                <th class="col2">Column 2 Header</th>
            </tr>
            <tr>
                <td class="col1">R1 C1</td>
                <td class="col2">R1 C2</td>
            </tr>
            <tr>
                <td class="col1">R2 C1</td>
                <td class="col2">R2 C2</td>
            </tr>
        </table>
     </body>
 </html>

私のCSSファイル：

.col1{
    background-color:Lime;  
}

そして、私のJavascriptファイル：

function testerFunction() {
    alert (document.getElementsByClassName('.col1').style.backgroundColor);  
}

実行すると、IE、Firefox、Chromeでほぼ同じエラーが発生します。

undefinedのプロパティ 'backgroundColor'を読み取ることができません。

document.getElementsByClassName DOMオブジェクトによって返されるデータ型と関係があると感じています。参照先のWebサイトは、HTMLcollectionを返すと述べています。私が見つけた他の場所は、それが要素の「リスト」を返すと言います。配列を作成し、結果を配列に割り当て、ループを使用して配列内の各要素にアクセスしようとしましたが、同じ場所で同じエラーが発生しました。 「コレクション」の扱い方がわからないだけかもしれません。とにかく、「ライム」または16進数またはrgbに相当するものを期待していました。これがCSSファイルで定義したものだからです。 Javascriptで変更できるようにしたいです。どんな助けでも大歓迎です。ありがとう！

編集：Shylo Hana's Answerに引数を追加して、よりモジュール化する

function testerFunction() {
    changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
    var cols = document.getElementsByClassName(column);
    for(i=0; i<cols.length; i++) {
      cols[i].style.backgroundColor = color;
    }
}
javascriptcssdom
17
jgrant

Quynh Nguyenが述べたように、「。」は必要ありません。 classNameで。ただし、document.getElementsByClassName（ 'col1'）はオブジェクトの配列を返します。

配列にはクラスがないため、これは「未定義」の値を返します。配列要素をループする必要があります...

function changeBGColor() {
  var cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i++) {
    cols[i].style.backgroundColor = 'blue';
  }
}
44
Shylo Hana

「。」を追加する必要はありません。クラス名に。これはします

document.getElementsByClassName('col1')

さらに、javascriptを介して背景色を定義していないため、直接呼び出すことはできません。上記の目的を達成するには、window.getComputedStyle（）またはjqueryを使用する必要があります。

これが実際の例です

http://jsfiddle.net/J9LU8/

3
Infinity

いいねありがとうございました。私のために働いた。

なぜjQueryをロードしたのかわかりません。使用されていません。私たちの中には、帯域幅に制限のあるダイヤルアップモデムと衛星をまだ使用している人もいます。少ないほど優れています。

<script>
        function showAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'Lime';
            cols[i].style.width = '50%';
            cols[i].style.borderRadius = '6px';         
            cols[i].style.padding = '10px';
            cols[i].style.border = '1px green solid';
            }
        }
        function hideAnswers(){
          var cols = document.getElementsByClassName('Answer');
          for(i=0; i<cols.length; i++) {
            cols[i].style.backgroundColor = 'transparent';
            cols[i].style.width = 'inheret';
            cols[i].style.borderRadius = '0';
            cols[i].style.padding = '0';
            cols[i].style.border = 'none';          
          }
        }
    </script>
3
Jules Bartow

getElementsByClassNameはIE 8で動作し、querySelectorAllはCSS2セレクターのみ）で動作しないため、document.querySelectorAll(".col1")の方が良いかもしれません。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassNamehttps://developer.mozilla.org/en-US/docs/ Web/API/Document.querySelectorAll

3
Johann Echavarria

これは最善の方法ではないと思いますが、私の場合、他の方法は機能しませんでした。

stylesheet = document.styleSheets[0]
stylesheet.insertRule(".have-border { border: 1px solid black;}", 0);

https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript の例

0
RealNeo