使用getElementById改变多个DIV id的背景

using getElementById to change background of multiple DIV id's

本文关键字：id 背景 DIV getElementById 改变 使用      更新时间：2023-09-26

在这个问题上花了几个小时，我需要把它扔给大众。我在http://sketch360test.co.uk/test.php上有一个测试页面，我试图使用onclick事件一次服务于两个目的…1)显示/隐藏各种结果div(这是工作)，2)改变背景图像(s)的"问题"div。所有的"问题"div默认有一个绿色的背景图像(由CSS控制)，一个黑色的图像在滚动…我试图让他们每个人都有一个黑色的图像点击，以及重置bg图像为所有其他问题潜水绿色当一个被点击。希望这能说得通……如果您查看该页面，应该会更明显!

我已经设法得到这个工作为一个单一的实例，即…点击问题1、问题2或问题3都会变成黑色。这已经通过使用内联onclick函数调用css类来完成，例如:

<div id="section-menu-1" onclick="this.className='className2';">Question 1</div>

然后我为这个元素(问题1)的容器添加了更多的javascript，它设法将问题3的黑色bg"重置"或"恢复"为绿色。这是使用以下脚本完成的:

<script type="text/javascript">
function changeClass()
{
 var e = document.getElementById("section-menu-3");
 e.setAttribute('class', 'className1');
 e.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}
</script>

请注意，我已经尝试了许多脚本来改变我的div类，这是唯一一个始终如一的工作。这里有一个问题，我想修改上面的脚本来影响所有的问题ID，而不仅仅是"section-menu-3"。顺便说一句，在这个演示中只有3个问题，但我将有多达7或8在最后一页，所以需要修改上述脚本，以便能够采取众多的ID。我尝试过像getElementsByTag这样的东西，但还没有能够让它们工作(也许是因为我试图将一个类添加到我已经应用于该过程的元素中)。

我尝试过的任何其他方法最终都破坏了上述迷你脚本的功能。

基本上,救命![请:))]

将所有div用id括起来:

<div id="section-menu-container">
    <div id="section-menu-1" onclick="this.className='className2';">Question 1</div>
    <div id="section-menu-2" onclick="this.className='className2';">Question 2</div>
    <div id="section-menu-3" onclick="this.className='className2';">Question 3</div>
</div>

然后使用javascript函数:

function changeClass()
{
 var elems = document.getElementById("section-menu-container").getElementByTagName('div');
 elems.setAttribute('class', 'className1');
 elems.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}

看看这个演示:fiddle

基本上，您需要某种通用选择器，正如Paul上面所建议的，jquery是一个很好的工具。然后你可以在你的问题中添加一个类，说"myclass"。然后，使用jquery:

$ (' .myclass ')。attr("阶级"、"className1");

或者，你可以直接使用javascript: document.getElementsByClassName('myclass')将返回一个DOM对象数组，您需要遍历每个元素。但是，在IE6 SP1之前的IE版本中可能不支持getElementsByClassName

如何实现一个简单的跨浏览器getElementsByClassName函数

function initializeGetElementsByClassName ()
{
  if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
      var hasClassName = new RegExp("(?:^|''s)" + className + "(?:$|''s)");
      var allElements = document.getElementsByTagName("*");
      var results = [];
      var element;
      for (var i = 0; (element = allElements[i]) != null; i++) {
        var elementClass = element.className;
        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
          results.push(element);
        }
        return results;
      }
    }
};
var currentWindowOnLoad = window.onload;
window.onload = function () {
    if (currentWindowOnLoad) {
        currentWindowOnLoad();
    }
    initializeGetElementsByClassName();
};

现在使用它，你可以简单地做如下操作:

HTML 

<div class="sectionMenu" id="id="section-menu-1" ></div>
<div class="sectionMenu" id="id="section-menu-2" ></div>
<div class="sectionMenu" id="id="section-menu-3" ></div>
脚本

var sectionMenus = document.getElementsByClassName("sectionMenu");
for (var i = 0; i < sectionMenus.length; i++) {
  var currentClass = !sectionMenu[i].getAttribute("class") ? sectionMenu[i].getAttribute("classname") : sectionMenu[i].getAttribute("class");
  sectionMenu[i].setAttribute("class", currentclass + " classname1");
  sectionMenu[i].setAttribute("classname", currentclass + " classname1");
}
相关文章：