Question

为什么以下代码在单击按钮时不切换元素颜色？我的假设是style.color返回一个对象而不是一个字符串。什么是纠正这个问题的最佳方法。先谢谢！

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
asd=document.getElementById("demo")
if (asd.style.color!="rgb(255,0,0)")
asd.style.color="rgb(255,0,0)";
else
asd.style.color="rgb(0,0,0)";
}
</script>
</head> 
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can change the style of an HTML element.
</p>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

Answer 1

浏览器供应商会返回style.color值的各种版本。

通过对此页面的快速测试（通过将代码粘贴到JavaScript控制台中，您可以自己查看）：

IE8会为"#888"

document.querySelectorAll('div[class="user-details"]')[0].currentStyle.color

Chrome和Firefox返回"rgb(136, 136, 136)"

document.defaultView.getComputedStyle(document.getElementsByClassName('user-details')[0], null)['color']

我很确定我之前看过一个浏览器的先前版本返回"rgb(136,136,136)"（没有空格）。

解决这种不一致问题的一种方法是在CSS类中定义颜色，并在类名之间切换。

非常 simple demonstration这将是以下代码。然而，这是非常简单，因为它只有在元素有一个CSS类时才有效。您需要编写一个实用程序函数来检查元素是否已应用类，并且如果您的设计需要多个类，则需要从列表中添加和删除单个类。这些已经写过很多次，所以有很多例子（搜索javascript hasclass addclass removeclass）或使用现有的实用程序库。

<强> CSS

.on {
    color:#f00;
}

.off {
    color:#000;
}

<强>的JavaScript

function myFunction() {
    var e = document.getElementById("demo");

    e.className = e.className === 'on' ? e.className = 'off' : e.className = 'on';
}

<强> HTML

<h1>My First JavaScript</h1>

<p id="demo" class="off">
JavaScript can change the style of an HTML element.
</p>

<button type="button" onclick="myFunction()">Click Me!</button>

Answer 2

浏览器在逗号后面设置带有空格的内联rgb颜色，因此 if 语句必须与字符串完全匹配。在rgb值中使用逗号后添加空格将使其工作。

if (asd.style.color!="rgb(255, 0, 0)")

Answer 3

if(document.getElementById("color1").style.color!="#FF0000")
{
document.getElementById("color1").style.color="#FF0000";
}
else
{
document.getElementById("color1").style.color="#FFFFFF";
}

试试这个希望会有效。

根据DOM元素的RGB或Hex值切换颜色

3 个答案: