web-dev-qa-db-ja.com

イベントが発生したときに要素のスタイルを変更するgetElementsByClassName

使用しようとしています

 onmouseover="document.getElementsByClassName().style.background='color'"

別のページ要素にカーソルを合わせると、特定のクラス名を持つすべてのdivの色を別の色に変更します。

ここにjsfiddleがあります-私が間違っているところについて誰かがいくつかの役に立つポインタを与えることができれば素晴らしいと思いますが、私が欠けていることは本当に明白なことです。 document.getElementByIdで機能しましたが、最初のdivの色だけが変更され、すべての色は変更されませんでした。

ありがとう:)

javascriptcssonmouseovergetelementsbyclassname
7
user2752988

関数名が示すように、 getElementsByClassName は、1つのオブジェクトだけではなくコレクションを返します。したがって、それらをループして、色を適用する必要があります。

document.getElementsByClassName()
                   ^_______

さらに、ID部分が無効です。 Idにはスペースを含めることはできません。また、次の違反のあるページには表示されません。

<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>

この方法で実行できます（ハンドラーとは何かを調べて、自分で試してみることができます）。ハンドラーにはインライン属性を使用しないでください。

window.onload=function(){
    var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

フィドル

実際の作業で実際にそれを実行しようとしている場合は、スタイル属性を変更せず、代わりにクラスを定義し、マウスオーバーイベント、マウスアウトイベントでクラスを追加/削除して、CSSのカスケードプロパティの機能を利用できるようにします。

18
PSL