javascript - 根据DOM元素的RGB或十六进制值切换颜色

为什么在单击按钮时以下代码不切换元素颜色？我的假设是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>

最佳答案

浏览器供应商返回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>

关于javascript - 根据DOM元素的RGB或十六进制值切换颜色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16465956/