1

我正在尝试设置它，以便边框根据用户当前所在的页面更改我网站上不同元素的颜色。我正在使用PHP来确定页面，然后$color根据PHP确定设置变量（在JS函数内）

由于某种原因，这根本行不通。我什至尝试将该功能放在 onmouseover 中以查看它是否可以工作，但它不会。

我在这个 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.getElementsByClassName返回多个元素，而不仅仅是一个。因此，您无法.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 回答