Amr*_*eed 2 html javascript css web
为什么这段代码不起作用？
<!DOCTYPE html>
<html>
<head>
<title> Home </title>
</head>
<body id = "b" bgcolor = "lightblue">
<button onclick = "document.getElementById('b').bgcolor = 'lightgreen'"> Light Green </button>
</body>
</html>
我试图在body标签中更改文本属性值并且它可以工作,但由于某种原因它不适用于bgcolor,并且背景仍然具有浅蓝色.
样式通过设置.style.backgroundColor(有关style对象的详细信息,请参阅MDN ).bgcolor作为一个属性已经过时了十多年,反映的属性是bgColor(案例是重要的).
所以:
document.getElementById("b").style.backgroundColor = 'lightgreen';
但是,通常,将表示与标记混合并不理想.相反,请考虑添加/删除使用CSS设置样式的类,例如:
document.getElementById("b").classList.add('clicked');
...用
.clicked {
background-color: lightgreen;
}
...在你的样式表中.
(classList在现代浏览器中得到了很好的支持,并且对于过时的浏览器有一个polyfill; 在MDN上有更多.)