发布加载JS函数onload

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

由于某些原因，这根本不起作用。我甚至尝试将这个函数放在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');"; 
}

感谢您的时间和帮助。

来源

2012-08-08 Zach Harner

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-08 16:37:40

我会更好更改他们从Class到Id在我的CSS表和div标签，并且还将它更改为js中的getElementsById？谢谢您的回复！ – 2012-08-08 16:44:19

@ZachHarner：如果你愿意，你可以使用ID，只要记住ID是** unique **。你不能有多个具有相同ID的元素。它也是'getElementById'（没有's'）。 – 2012-08-08 16:46:01

@ZachHarner：实际上，一个更好的想法是给所有你想改变颜色的元素（比如'colorChange'），然后你可以很容易地用一个'for'循环来改变它们。 – 2012-08-08 16:46:46

发布加载JS函数onload

回答

相关问题