1

ユーザーが現在どのページを表示しているかに基づいて、サイトのさまざまな要素の境界線の色が変わるように設定しようとしています。$colorPHPを使用してページを決定し、PHPの決定に基づいて（JS関数内で）変数を設定しています

何らかの理由で、これはまったく機能しません。関数をマウスオーバーに入れて、機能するかどうかを確認してみましたが、機能しませんでした。

このJS関数内のどこかにエラーがあるはずです。私がまとめたものは他にもありますが、それらは正常に機能しています。私はJSに非常に慣れていないので、明らかなエラーをまだ理解していない可能性があります。

これが私がロードしようとしているJS関数です。

function colorchange($color) {
    var $header = document.getElementsByClassName('header');
    $header.style.borderColor = $color;

    var $contentblock = document.getElementsByClassName('contentblock');
    $contentblock.style.borderColor = $color;

    var $rightfloat = document.getElementsByClassName('rightfloat');
    $rightfloat.style.borderColor = $color;

    var $footer = document.getElementsByClassName('footer');
    $footer.style.borderColor = $color;

    var $mainimg = document.getElementsByClassName('mainimg');
    $mainimg.style.borderColor = $color;

    var $menucontainer = document.getElementsByClassName('menucontainer');
    $menucontainer.style.borderColor = $color;
}

私はここでそれを呼んでいます：

<body onload="<?php echo $changecolor; ?>">

そして、これは色を決定するためのPHPスニペットです。

if (isset($pageid)) {
    if ($pageid == "ministries") {
        $changecolor = "colorchange('#a52926');";
    }
    if ($pageid == "events") {
        $changecolor = "colorchange('#a54a4c');";
    }
    if ($pageid == "prayer") {
        $changecolor = "colorchange('#459979');";
    }
    if ($pageid == "about") {
        $changecolor = "colorchange('#a55029');";
    }
    if ($pageid == "contact") {
        $changecolor = "colorchange('#469e47');";
    }
} else {
    $changecolor = "colorchange('#26996d');";
}

お手数をおかけしますが、よろしくお願いいたします。

4

1 に答える 1

0

document.getElementsByClassName1つだけでなく、複数の要素を返します。このため、それを行うことはできません.style。返された要素をループして、それぞれに設定する必要があります.style。

var $header = document.getElementsByClassName('header');
for(var i = 0, len = $header.length; i < len; i++){
    $header[i].style.borderColor = $color;
}

編集：同じクラスの色を変更したいすべての要素を指定することをお勧めします（例:) changeColor。そうすれば、これらすべての異なるgetElementsByClassNameステートメントは必要ありません。

function colorchange(color) {
    var colorChange = document.getElementsByClassName('colorChange');
        for(var i = 0, len = colorChange.length; i < len; i++){
            colorChange[i].style.borderColor = color;
        }
}
于 2012-08-08T16:37:40.477 に答える