36

私の目的は、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 を返すと述べています。私が見つけた他の場所では、要素の「リスト」を返すと言われています。配列を作ってその配列に結果を代入し、配列内の各要素にループでアクセスしてみましたが、同じ箇所で同じエラーが出ました。「コレクション」の扱い方がわからないだけかもしれません。いずれにせよ、CSS ファイルで定義したのは「lime」または 16 進数または RGB に相当するものだと思っていました。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;
    }
}
4

7 に答える 7

4

「.」を追加する必要はありません。あなたのクラス名に。これで十分です

document.getElementsByClassName('col1')

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

これが実際の例です

http://jsfiddle.net/J9LU8/

于 2013-10-14T04:01:28.137 に答える
3

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

ただし、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>
于 2014-06-27T02:12:30.280 に答える