同時に複数の要素のスタイルを変える

　文書中の要素のスタイルを変える場合、document.getElementByIdや、getElementsByTagNameなどがよく利用されます。

　getElementByIdはあるIDを持った要素を指定し、getElementsByTagNameはある要素名の要素を指定するものです。しかし、クラス名で要素を指定するものはありません。

　そこで新しく、あるクラス名の要素を指定するgetElementsByClassNameという、要素オブジェクトの配列を取り出す関数を作成してみました（実際のところ同じようなことをやっている人は結構いますね）。

　ちなみにクラス名とは、class属性値のことです。次の例では、サンプル1、サンプル2はクラス名がabc、サンプル3はtest、そしてサンプル4は、sampとtestの2つのクラス名を指定したものです。複数のクラス名を指定する場合、サンプル4のようにクラス名を半角スペースなどの空白文字で区切ってください。

<p>
<span class="abc">サンプル1</span>
<em class="abc">サンプル2</em>
<span class="test">サンプル3</span>
</p>
<p class="abc test">サンプル4</p>

実際に作成する

　まず、準備として次のコードを、HTML文書のHEAD要素中に貼り付けてください（JSファイルにする場合もです）。getElementsByClassNameを新しく作成する部分がこれに当たります。

<script type="text/javascript">
<!--
document.getElementsByClassName = function (className) {
    var i, j, eltClass;
    var objAll = document.getElementsByTagName ? document.getElementsByTagName("*") : document.all;
    var objCN = new Array();
    for (i = 0; i < objAll.length; i++) {
        eltClass = objAll[i].className.split(/\s+/);
        for (j = 0; j < eltClass.length; j++) {
            if (eltClass[j] == className) {
                objCN.push(objAll[i]);
                break;
            }
        }
    }
    return objCN;
}
//-->
</script>

　準備が終われば、目的に合わせたコードを記述するだけです。

　ここで作成したgetElementsByClassNameは、getElementsByTagNameと同じような使い方をします。例えば"abc"というクラス名の要素オブジェクトの配列を取り出すならば、次のようなコードを記述します。

document.getElementsByClassName("abc")

　スタイルを書き換える例としては、下記のコードを実行すれば、クラス名が"abc"の要素のうち0番目のもの（1ではなく0から数えます）の背景色を黄色にするものです。

document.getElementsByClassName("abc")[0].style.backgroundColor = "yellow";

　また、クラス名が"abc"の要素すべての文字色を赤色にしたい場合は、下記のように記述するといいでしょう。

var i;
var len = document.getElementsByClassName("abc").length;
for (i = 0; i < len; i++) {
    document.getElementsByClassName("abc")[i].style.color = "red";
}

　下にサンプルを用意しました。ボタンをクリックすると、文字色や背景色が変化します。

　これはサンプルです。

　ボタンをクリックすると、同時に複数の要素のスタイルが変化します。

　ぜひ参考にしてください。

　サンプルの部分のソースです。「文字色」はsetColor()、「背景色」はsetColor()をそれぞれ実行する仕組みです。クラス名が"abc"のものは文字色が変化、"abc"のものは背景色が変化し、特に「ボタンをクリックすると」の部分には両方のクラス名が指定されているので、文字色・背景色ともに変化します。

<script type="text/javascript">
<!--
var check1 = true;
var check2 = true;
function setColor(){
    var i;
    var myColor;
    var len = document.getElementsByClassName("abc").length;
    if (check1) {myColor = "silver";}
    else {myColor = "";}
    check1 = !check1;
    for (i = 0; i < len; i++) {
        document.getElementsByClassName("abc")[i].style.color = myColor;
    }
}

function setBGColor(){
    var i;
    var myColor;
    var len = document.getElementsByClassName("test").length;
    if (check2) {myColor = "yellow";}
    else {myColor = "";}
    check2 = !check2;
    for (i = 0; i < len; i++) {
        document.getElementsByClassName("test")[i].style.backgroundColor = myColor;
    }
}
//-->
</script>
<p>
<input type="button" value="文字色" onclick="setColor()">
<input type="button" value="背景色" onclick="setBGColor()">
</p>
<p>　これは<span class="abc">サンプル</span>です。</p>
<p>　<span class="abc test">ボタンをクリックすると</span>、
同時に複数の要素の<span class="test">スタイル</span>が変化します。</p>
<p>　ぜひ<em class="test">参考に</em>してください。</p>

　他にもいくつかスタイルを変える例を載せておきます。

/* フォントサイズを20ピクセルにする */
document.getElementsByClassName("クラス名")[番号].style.fontSize = "20px";

/* 太字にする */
document.getElementsByClassName("クラス名")[番号].style.fontWeight = "bold";

/* 黒,1ピクセルの下線を表示する */
document.getElementsByClassName("クラス名")[番号].style.borderBottom = "black solid 1px";