为什么单击按钮时以下代码不会切换元素颜色？我的假设是 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>
最佳答案
浏览器 vendor 返回 style.color 值的各种版本。
从这个页面上的快速测试(通过将代码粘贴到 JavaScript 控制台中，您可以亲眼看到):
- IE8 为
document.querySelectorAll('div[class="user-details"]')[0].currentStyle.color返回"#888" - Chrome 和 Firefox 为
document.defaultView.getComputedStyle(document.getElementsByClassName('user-details')[0], null) 返回"rgb(136, 136, 136)"['颜色']
我很确定我之前看到过一个浏览器的旧版本返回 "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/