Question

我正在尝试设置它，以便边框根据用户当前所在的页面在我的网站上的不同元素上更改颜色。我使用PHP来确定页面，然后根据PHP确定设置变量$color（在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');";
}

感谢您的时间和帮助。

Answer 1

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

问题加载JS函数onload

1 个答案: