Javascript 基于DOM元素的RGB或十六进制值切换颜色_Javascript_Css_Colors

Javascript 基于DOM元素的RGB或十六进制值切换颜色

javascript css colors

Javascript 基于DOM元素的RGB或十六进制值切换颜色,javascript,css,colors,Javascript,Css,Colors,为什么单击按钮时，以下代码不切换元素颜色？我的假设是style.color返回的是排序对象，而不是字符串。纠正此问题的最佳方法是什么。提前感谢 <!DOCTYPE html> <html> <head> <script> function myFunction() { asd=document.getElementById("demo") if (asd.style.color!="rgb(255,0,0)") asd.style.color="r

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


函数myFunction（）
{
asd=document.getElementById（“演示”）
如果（asd.style.color！=“rgb（255,0,0）”）
asd.style.color=“rgb（255,0,0）”；
其他的
asd.style.color=“rgb（0,0,0）”；
}
我的第一个JavaScript

JavaScript可以更改HTML元素的样式。

点击我！

浏览器供应商返回各种版本的

style.color

值

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

IE8为

文档返回“#888”
。querySelectorAll（'div[class=“user details”]”）返回[0]。currentStyle.color

Chrome和Firefox为

document.defaultView.getComputedStyle（document.getElementsByClassName（'user-details'）[0]，null）['color']返回“rgb（136，136，136）”


我敢肯定，我以前看到过一个版本的one browser返回“rgb（136136136）”

（不带空格）

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

下面的代码就是其中一个非常重要的部分。然而，这是非常简单的，因为它只在元素只有一个CSS类的情况下工作。如果设计需要多个类，则需要编写一个实用函数来检查元素是否应用了类，并编写函数来从列表中添加和删除单个类。这些代码以前已经编写过很多次，因此有很多示例（搜索

javascript hasklass 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

JavaScript可以更改HTML元素的样式。

点击我！

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

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

试试看，这个希望会奏效。

这是我生命中最美好的时刻之一。谢谢你的回答。这就是我所想的，谢谢你的解释和补充说明。很乐意帮助。我只是添加了一个小演示的答案，虽然它有一些警告你可能要考虑。

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