javascript html element.style.color 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7077939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html element.style.color question
提问by Michael
I'm writing some javascript code to make some text blink but it wont work.
我正在编写一些 javascript 代码来使一些文本闪烁，但它不起作用。
function start_blink(elementId) {
//var red = "#ff0000";
//var white = "#000000";
var element = document.getElementById(elementId);
element.style.color == 'red';
if(document.getElementById) {
element.style.color = (element.style.color == 'red') ? 'white' : 'red';
//document.write(element.style.color);
blinkIntervalID = setInterval(start_blink, 1000, elementId);
}
}
It only turns red, never white, meaning that
element.style.color == 'red'always returns as false.
Why is this the case?
它只会变成红色，不会变成白色，这意味着它
element.style.color == 'red'总是返回 false。
为什么会这样？
回答by Richard H
For a start this is wrong:
首先这是错误的：
element.style.color == 'red'
should be "=" only. As you've written it this will be evaluated as an equality test, returning true or false.
应该只是“=”。正如您所写的，这将被评估为相等测试，返回 true 或 false。
Also, check what element.style.coloractually returns, it might not be "red" or "white" but an rgbor hexcode and may be browser dependent.
此外，检查element.style.color实际返回的内容，它可能不是“红色”或“白色”，而是一个rgb或hex代码，并且可能取决于浏览器。
Thirdly, your use of setInterval is wrong. See herefor details on how to use this. You probably mean setTimeout:
第三，你对 setInterval 的使用是错误的。有关如何使用它的详细信息，请参见此处。你可能是说setTimeout：
setTimeout(function() { start_blink(elementId); }, 1000);
回答by Shadow Wizard is Ear For You
Your code is wrong in many ways... change the function to this instead:
您的代码在很多方面都是错误的...将函数更改为：
function start_blink(elementId) {
//var red = "#ff0000";
//var white = "#000000";
var element = document.getElementById(elementId);
element.style.color = (element.style.color == 'red') ? 'white' : 'red';
//document.write(element.style.color);
blinkIntervalID = window.setTimeout(function() {
start_blink(elementId);
}, 1000);
}
And call it for the first time like this:
第一次这样调用它：
window.onload = function() {
start_blink('MySpan');
};
回答by Jamie Dixon
As has been pointed out already, you need to make sure that when you're setting a value that you use =rather than ==which is used for comparing values.
正如已经指出的那样，您需要确保在设置您使用的值=而不是==用于比较值的值时。
Secondly, checking the colour value is going to be rather inconsistent depending on how the browser decides to interpret the colour (rgb, hex etc).
其次，根据浏览器决定如何解释颜色（rgb、hex 等），检查颜色值将相当不一致。
What you can do is count the number of times the method is executed and decide based on that.
您可以做的是计算方法执行的次数并据此做出决定。
Here's an example: http://jsfiddle.net/nUvJV/
这是一个例子：http: //jsfiddle.net/nUvJV/
Here, instead of checking the colour we simply check the count:
在这里，我们不检查颜色，而是检查计数：
item.style.color = (blinkCounter % 2)? '#000' : '#f00';
回答by Mallik69
I have tried something like this and it worked :
我试过这样的事情，它奏效了：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Style change</title>
</head>
<body>
<p id ="stt" style="color: red"> HI MALLIK, I AM GONNA CHANGE MY STYLE !! </p>
<button id="butt" onclick="fontChange()">font change</button>
<script type="text/javascript">
function fontChange(){
var line= document.getElementById('stt');
line.style.fontSize = "30px";
line.style.color = (line.style.color == "red") ? "blue" : "red";
}
</script>
</body>
</html>
回答by James Hill
It appears that you're attempting to set the element's color to red right before your if. If that's the case it should be:
看来您正试图在if. 如果是这样，它应该是：
element.style.color = 'red';
Not:
不是：
element.style.color == 'red';
EDIT
编辑
Yes, your logic was a bit off. Here's a working Fiddle.
是的，你的逻辑有点不对。这是一个有效的小提琴。
HTML
HTML
<div id="test">This is text</div>
JS
JS
var myInterval = null;
function start_blink(elementId) {
var element = document.getElementById(elementId);
if (myInterval == null) {
element.style.color = 'red';
myInterval = setInterval(start_blink, 1000, elementId);
}
else {
element.style.color = (element.style.color == 'red') ? 'white' : 'red';
}
}
start_blink("test");
