1

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

3 回答 3

3

浏览器供应商返回不同版本的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 类中定义颜色并在类名之间切换。

下面的代码就是一个非常 简单的演示。然而，这非常简单，因为它仅在元素具有单个 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>
于 2013-05-09T16:01:58.560 回答
0 
if(document.getElementById("color1").style.color!="#FF0000")
{
document.getElementById("color1").style.color="#FF0000";
}
else
{
document.getElementById("color1").style.color="#FFFFFF";
}

试试这个希望会奏效。

于 2013-05-09T16:37:03.567 回答
0

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

if (asd.style.color!="rgb(255, 0, 0)")
于 2013-05-09T16:09:49.757 回答