我正在做一个项目,我只能使用 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
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);
}
请注意addEventListener
IE attachEvent instead
DEMO http://jsfiddle.net/arcm111/zzAcy/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)