Detecting CSS property value of a html element by JavaScript
Question
Untill the alert it is ok, But the if is not executing. Here the program stack. Is there any way to detect the display property of div that is it "bloc" or "none"?
for(i=1;i<=10;i++)
{
alert("Hamdun Soft Past Job Will be Deleted");
if(document.getElementById(i).style.display=="block")
document.getElementById(i).innerHTML="Hamdun Soft Is Clear Now";
}
Oh! Kepp in mind that from div with id=1 to 10, one's display= "block" and all of the 9 is "none". I did that with another JavaScript program. But now I need to detect the "block" one. Tanks.
3 answers
solution1
1 ACCPTED 2014-10-14 06:59:27
The issue is Element.style.display will only work when the element has an inline style. You need to get the computed style:
for(i=1;i<=10;i++){ var elem = document.getElementById(i); if((elem.currentStyle ? elem.currentStyle.display : getComputedStyle(elem, null).display) == 'block') elem.innerHTML="Hamdun Soft Is Clear Now"; }
<div id="1">aaa</div> <div id="2">aaa</div> <div id="3">aaa</div> <div id="4">aaa</div> <div id="5">aaa</div> <div id="6">aaa</div> <div id="7">aaa</div> <div id="8">aaa</div> <div id="9">aaa</div> <div id="10">aaa</div>
Note: elem.currentStyle is first checked because IE can use this .
solution2
1 2014-10-14 07:09:09
Like Zigmantas said, the problem is with the id. In HTML4 an id needs to start with a letter. Even though numeric ID's are allowed in HTML5, other problems may arise.
Note that the style needs to be explicitly set on the element. In this example, the third div DOES have the style, but not inline, so it is not selected. The first one is, like you requested.
<html>
<head>
<style type="text/css">
div:last-child <!-- #3 does not work in chrome -->
{
display:block; color:red
}
</style>
</head>
<body>
<section>
<div id="1" style="display:block;color:red">one</div>
<div id="2" >two</div>
<div id="3" >three</div>
</section>
</body>
<script>
for(i=1;i<=3;i++)
{
alert("Hamdun Soft Past Job Will be Deleted");
// getComputedStyle would probably be better.
// as would using an id starting with a letter.
if(document.getElementById(''+i).style.display=="block")
document.getElementById(''+i).innerHTML="Hamdun Soft Is Clear Now";
}
</script>
</html>
solution3
0 2014-10-14 07:37:27
Try document.getElementById(i).style.display=="" , since "display" doesn't specify at initial, it set default as "".
function Display() { for(i=1;i<=6;i++) { if(document.getElementById(i).style.display=="block" || document.getElementById(i).style.display=="") document.getElementById(i).innerHTML="Hamdun Soft Is Clear Now"; } }
<div id="1" style="display:none;">111</div> <div id="2" style="display:block;">222</div> <div id="3">333</div> <div id="4" style="display:inline;">444</div> <div id="5" style="display:list-item;">555</div> <div id="6" style="display:initial;">666</div> <input type="button" onclick="Display()" value="Press">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.