html element.style.color question
I'm writing some javascript code to make some text blink but it wont work.
function start_blink(elementId) {
//var red = "#ff0000";
//var white = "#000000";
var element = d开发者_如何学Cocument.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.
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.
Also, check what element.style.color actually returns, it might not be "red" or "white" but an rgb or hex code and may be browser dependent.
Thirdly, your use of setInterval is wrong. See here for details on how to use this. You probably mean setTimeout:
setTimeout(function() { start_blink(elementId); }, 1000);
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');
};
Live test case.
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).
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/
Here, instead of checking the colour we simply check the count:
item.style.color = (blinkCounter % 2)? '#000' : '#f00';
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:
element.style.color = 'red';
Not:
element.style.color == 'red';
EDIT
Yes, your logic was a bit off. 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");
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>
加载中,请稍侯......
精彩评论