Question

为什么这段代码不起作用？

<!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，背景仍然具有浅蓝色。

Answer 1

样式通过.style.backgroundColor设置（有关style object的详细信息，请参阅MDN）。 bgcolor作为一个属性已经过时了十多年，反映的属性是bgColor（案例很重要）。

所以：

document.getElementById("b").style.backgroundColor = 'lightgreen';

但是，通常情况下，将表示与标记混合并不理想。相反，请考虑添加/删除使用CSS设置样式的类，例如：

document.getElementById("b").classList.add('clicked');

...与

.clicked {
    background-color: lightgreen;
}

...在你的样式表中。

（classList在现代浏览器中得到了很好的支持，并且有一个用于过时浏览器的polyfill;更多on MDN。）

使用带有bgcolor属性的getElementById（）

1 个答案: