5

我正在做一个项目，我只能使用 JS 来操作 HTML 文件。我想更改 HTML 中所有 div 的背景颜色，我目前有以下内容。

//Highlight Function

function highlight(e) {
  e.target.style.backgroundColor = "orange";
}

function unhighlight(e) {
  e.target.style.backgroundColor = "green";
}

function init() {
  //Mouseover
  var divs = document.getElementsByTagName("div")[0];
  divs.addEventListener('mouseover', highlight, false);
  divs.addEventListener('mouseout', unhighlight, false);
}
window.addEventListener("load", init, false);

HTML 看起来像这样

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

显然当前代码只改变了其中一个 div，如何通过仅操作 JS 来选择所有 div

4

2 回答 2

7 
var elm = document.getElementsByTagName('div');

function highlight() {
    this.style.backgroundColor = "orange";
}

function unhighlight() {
    this.style.backgroundColor = "green";
}

function init() {
    for (var i = 0; i < elm.length; i++) {
        if (window.addEventListener) { //Firefox, Chrome, Safari, IE 10
            elm[i].addEventListener('mouseover', highlight, false);
            elm[i].addEventListener('mouseout', unhighlight, false);
        } else if (window.attachEvent) { //IE < 9
            elm[i].attachEvent('onmouseover', highlight);
            elm[i].attachEvent('onmouseout', unhighlight);
        }
    }
}

    if (window.addEventListener) { //when document is loaded initiate init
        document.addEventListener("DOMContentLoaded", init, false);
    } else if (window.attachEvent) {
        document.attachEvent("onDOMContentLoaded", init);
    }

请注意，addEventListenerIE < 9 不支持，您必须attachEvent改用

演示

于 2013-04-04T01:44:05.173 回答
2

你不能那样使用.addEventLister()- 它必须逐个元素地调用。

for (var i = 0; i < divs.length; ++i)
  divs[i].addEventListener(...);

或者，您可以向元素添加单个事件侦听<body>器并捕获从<div>元素中冒出的事件。

于 2013-04-04T01:22:29.567 回答