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

私の目的は、各データエントリを個別にIdまたはNameでアドレス指定することなくテーブルの列の背景色を変更することです。私はこれを行ういくつかの方法があることを知っています、私は正確に3を試しました、そして、それぞれに問題があります。わかりやすくするために、この質問ではDOM内の element.style.backgroundColorオブジェクトを使用して正常に実行する方法を尋ねています。ここに私のHTMLです：DOMスタイルを使用してJavascriptでCSSクラスプロパティを取得または変更する

<!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で同じエラーを取得し、クロム：

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

document.getElementsByClassName DOMオブジェクトから返されるデータ型と何か関係があります。参照されるWebサイトには、HTMLコレクションが返されると記載されています。私が見つけた他の場所は、要素の「リスト」を返します。配列を作成して配列に結果を代入し、配列内の各要素にループでアクセスしようとしましたが、同じ場所で同じエラーが発生しました。それは、私が "コレクション"を扱う方法を知らないだけかもしれない。いずれにせよ、私はCSSファイルで定義した "lime"またはhexまたはrgb相当のファイルを期待していました。私はJavascriptでそれを変更できるようにしたい。どんな助けでも大歓迎です。ありがとう！

EDIT：「」

それをよりモジュラー作るためにShylo花の回答に引数を追加しました

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; 
    } 
}

出典

2013-10-14 jgrant

チェックアウトこれを：http://api.jquery.com/css/ –

@ shyloの答えが正しいか、のgetElementsByClassNameは間違いない「スタイル」プロパティ – xiaowl

である、あなたは必要ありません「と。」 classNameにあります。しかし、document.getElementsByClassName（ 'col1'）はオブジェクトの配列を返します。配列にクラスがないため、これは "未定義"値を返します。あなたはまだ...要素をループする必要があります

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

出典

2013-10-14 04:15:36

これは簡単で美しく機能しました。私はそれをもっとモジュラー化するためにいくつかの議論を加えました。それを書式設定のために投稿に編集させました。 – jgrant

あなたが追加する必要はありませんあなたのクラス名で。これは行うでしょう

document.getElementsByClassName('col1')

また、javascriptで背景色を定義していないので、直接呼び出すことはできません。 window.getComputedStyle（）またはjqueryを使用して、上で実行しようとしていることを達成する必要があります。クイングエンで述べたようにここで

は、実施例

http://jsfiddle.net/J9LU8/

出典

2013-10-14 04:01:28 Infinity

ああ、甘いを持っていない配列を返します！私の大きな問題は解決しませんが、ありがとう！私はその方法と参照クラスを今から変更します。 – jgrant

作業中のjsfiddleを追加しました。 – Infinity

ありがとう！ jsfiddleとあなたはどちらも素晴らしいです！ – jgrant

たぶん、より良いdocument.querySelectorAll(".col1")getElementsByClassNameので、しないのIE 8とquerySelectorAllん（althoughtのCSS2セレクタのみ）で動作します。

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

出典

2013-10-14 04:16:29

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

なぜ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-27 02:12:30

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

答えて

関連する問題