在代码中添加/更改元素的样式是一种不好的做法。今天你想改变背景颜色,明天你想改变背景图像,明天之后你决定改变边框也很好。
每次只因为设计需求发生变化而编辑代码是一件痛苦的事。此外,如果你的项目会增长,更改 js 文件将更加痛苦。更多的代码,更多的痛苦。
尽量避免使用硬编码样式,这将节省您的时间,如果您做得对,您可以要求为其他人执行“更改颜色”任务。
因此,您可以在节点上添加/删除 CSS 类,而不是更改样式的直接属性。在您的特定情况下,您只需对父节点执行此操作 - “div”,然后通过 CSS 设置子节点的样式。所以不需要对 DIV 和 H2 应用特定的样式属性。
再推荐一点。尽量不要连接硬编码的节点,而是使用一些语义来做到这一点。例如:“将事件添加到具有类‘内容’的所有节点。
总之,这是我将用于此类任务的代码:
//for adding a css class
function onOver(node){
node.className = node.className + ' Hover';
}
//for removing a css class
function onOut(node){
node.className = node.className.replace('Hover','');
}
function connect(node,event,fnc){
if(node.addEventListener){
node.addEventListener(event.substring(2,event.length),function(){
fnc(node);
},false);
}else if(node.attachEvent){
node.attachEvent(event,function(){
fnc(node);
});
}
}
// run this one when window is loaded
var divs = document.getElementsByTagName("div");
for(var i=0,div;div =divs[i];i++){
if(div.className.match('content')){
connect(div,'onmouseover',onOver);
connect(div,'onmouseout',onOut);
}
}
你的 CSS 应该是这样的:
.content {
background-color: blue;
}
.content.Hover{
background-color: red;
}
.content.Hover h2{
background-color : yellow;
}