html element.style.color 问题答案

【问题标题】：html element.style.color questionhtml element.style.color 问题
【发布时间】：2011-08-16 12:04:44
【问题描述】：

我正在编写一些 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);
            }
        }

它只会变成红色，不会变成白色，这意味着 element.style.color == 'red' 总是返回 false。
为什么会这样？

【问题讨论】：

第一件事 - 将 setInterval 更改为 setTimeout 以防止浏览器崩溃！！
element.style.color == 'red' 当颜色设置为“红色”时在 Chrome 中返回 true - jsfiddle.net/DdqZF
正在调用这个函数吗？

标签： javascript html colors coding-style

【解决方案1】：

首先这是错误的：

element.style.color == 'red'

应该只是“=”。如您所写，这将被评估为相等性测试，返回真或假。

另外，检查element.style.color 实际返回的内容，它可能不是“红色”或“白色”，而是rgb 或hex 代码，并且可能取决于浏览器。

第三，你对 setInterval 的使用是错误的。有关如何使用它的详细信息，请参阅here。你的意思可能是setTimeout:

setTimeout(function() { start_blink(elementId); }, 1000);

【讨论】：

【解决方案2】：

你的代码在很多方面都是错误的……把函数改成这个：

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);
}

第一次这样称呼它：

window.onload = function() {
    start_blink('MySpan');
};

Live test case.

【讨论】：

【解决方案3】：

正如已经指出的那样，您需要确保在设置值时使用= 而不是用于比较值的==。

其次，根据浏览器决定如何解释颜色（rgb、十六进制等），检查颜色值会相当不一致。

您可以做的是计算方法执行的次数并据此决定。

这是一个例子：http://jsfiddle.net/nUvJV/

在这里，我们只检查计数，而不是检查颜色：

item.style.color = (blinkCounter % 2)? '#000' : '#f00';

【讨论】：

【解决方案4】：

您似乎正试图在您的if 之前将元素的颜色设置为红色。如果是这样的话，它应该是：

element.style.color = 'red';

不是：

element.style.color == 'red';

编辑

是的，你的逻辑有点不对劲。 Here's a working Fiddle.

HTML

<div id="test">This is text</div>

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");

【讨论】：

哦，我明白了。在那种情况下，它确实会变成白色，但不会重复。我的 setinterval 函数语法正确吗？

【解决方案5】：

我已经尝试过这样的事情并且它成功了：

<!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>

【讨论】：