BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] DOM styleを使用してJavascriptでCSSのclassプロパティを取得・変更する。

2022-03-07 20:10:31

質問

私の目的は、IdやNameによって各データエントリーに個別に対処することなく、テーブルのカラムの背景色を変更することです。私はこれを行うにはいくつかの方法があることを知っていて、私は正確に3つを試しましたが、私はそれぞれで問題を抱えています。この質問では、シンプルでわかりやすくするため、私は 要素.style.backgroundColor オブジェクトを DOM 内に作成します。以下は私の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オブジェクトです。参照したウェブサイトでは、HTMLcollectionを返すと書かれています。私が見つけた他の場所では、要素の "リスト" を返すと書いてありました。配列を作り、結果を配列に代入し、配列の各要素にループでアクセスしてみましたが、同じ場所で同じエラーが発生しました。もしかしたら、私が, "collection." の扱い方を知らないだけかもしれませんが、とにかく、私は, "lime" または16進数かrgbに相当するものを期待していました、それは私がCSSファイル内で定義したからです。Javascriptで変更できるようにしたいのですが。何かご教示いただければ幸いです。ありがとうございます。

EDIT: Shylo Hanaの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;
    }
}

解決方法は？

Quynh Nguyen が言っているように、className に '.' は必要ありません。しかし - document.getElementsByClassName('col1') は、オブジェクトの配列を返します。

配列はクラスを持たないので、これは "undefined" 値を返します。それでも、配列の要素をループする必要があります。 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します