加载 JS 函数加载时出现问题

Issue loading JS function onload

本文关键字：加载 问题 JS 函数      更新时间：2023-09-26

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

感谢您的时间和帮助。

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;
        }
}
相关文章：