Question

我正在编写一些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。
为什么会这样呢？

Answer 1

首先，这是错误的：

element.style.color == 'red'

应该只是“=”。正如你所写，它将被评估为相等测试，返回true或false。

另外，请检查element.style.color实际返回的内容，可能不是“红色”或“白色”，而是rgb或hex代码，可能与浏览器有关。

第三，你使用setInterval是错误的。有关如何使用此功能的详细信息，请参阅here。你可能意味着setTimeout：

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

Answer 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

Answer 3

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

其次，根据浏览器决定解释颜色（rgb，hex等）的方式，检查颜色值会相当不一致。

你可以做的是计算方法执行的次数，并根据它来决定。

以下是一个示例：http://jsfiddle.net/nUvJV/

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

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

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

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

html element.style.color问题

5 个答案: