html element.style.color вопрос - PullRequest
Новая
       32

html element.style.color вопрос

3 голосов
/ 16 августа 2011

Я пишу некоторый код 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.
Почему это так?

Ответы [ 5 ]

3 голосов
/ 16 августа 2011

Для начала это неправильно: 

element.style.color == 'red'

должно быть только "=". Как вы уже написали, это будет оцениваться как проверка на равенство, возвращая true или false.

Также проверьте, что на самом деле возвращает element.style.color, это может быть не "красный" или "белый", а код rgb или hex и может зависеть от браузера.

В-третьих, вы неправильно используете setInterval. Смотрите здесь для получения подробной информации о том, как использовать это. Вы, вероятно, имеете в виду setTimeout : 

setTimeout(function() { start_blink(elementId); }, 1000);
2 голосов
/ 16 августа 2011

Ваш код неверен во многих отношениях ... вместо этого измените функцию на: 

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

Тестовый случай .

1 голос
/ 16 августа 2011

Как уже указывалось, вам нужно убедиться, что при настройке значения вы используете = вместо ==, который используется для сравнения значений.

Во-вторых, проверказначение цвета будет довольно непоследовательным в зависимости от того, как браузер решит интерпретировать цвет (rgb, hex и т. д.).

Что вы можете сделать, это подсчитать количество раз выполнения метода и принять решение на основечто.

Вот пример: http://jsfiddle.net/nUvJV/

Здесь вместо проверки цвета мы просто проверяем счетчик: 

item.style.color = (blinkCounter % 2)? '#000' : '#f00';
0 голосов
/ 16 марта 2016

Я пробовал что-то вроде этого, и это сработало: 

<!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>
0 голосов
/ 16 августа 2011

Похоже, что вы пытаетесь установить красный цвет элемента прямо перед вашим if. Если это так, то должно быть: 

element.style.color = 'red';

Не: 

element.style.color == 'red';

EDIT

Да, ваша логика была немного не в порядке. Вот рабочая скрипка.

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