私の目的は、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;
}
}