How to use JavaScript to identify the CSS property value of an HTML element

Question

How to use JavaScript to identify the CSS property value of an HTML element

Everything seems fine until the alert pops up, but the 'if' statement is not executing properly. Here is the program stack. Is there a way to check the display property of a div to see if it's set to "block" 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! Remember that out of the divs with IDs ranging from 1 to 10, one has its display set to "block" while the rest are set to "none". I set this using another JavaScript program. But now, I need to identify which one is set to "block". Thanks.

javascript html css properties

Answer 1

Answer №1

To resolve the issue, you must utilize the computed style and not just rely on inline styles like Element.style.display.

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: It is important to first check elem.currentStyle for compatibility with older versions of IE.

Answer 2

To resolve the issue, you must utilize the computed style and not just rely on inline styles like Element.style.display.

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: It is important to first check elem.currentStyle for compatibility with older versions of IE.

Answer 3

Answer №2

Zigmantas pointed out that the issue lies with the id in this case. In HTML4, an id must begin with a letter, although numeric IDs are now permitted in HTML5, it can still create other complications.

It's important to note that the style needs to be explicitly defined for the element. In this instance, the third div has the style set but not inline, so it doesn't get selected. The first div does have inline styling as 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");
   // Using getComputedStyle and starting IDs with letters would be better practices.
   if(document.getElementById(''+i).style.display=="block")
   document.getElementById(''+i).innerHTML="Hamdun Soft Is Clear Now";           
 }
 </script>
</html>

Answer 4

Zigmantas pointed out that the issue lies with the id in this case. In HTML4, an id must begin with a letter, although numeric IDs are now permitted in HTML5, it can still create other complications.

It's important to note that the style needs to be explicitly defined for the element. In this instance, the third div has the style set but not inline, so it doesn't get selected. The first div does have inline styling as 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");
   // Using getComputedStyle and starting IDs with letters would be better practices.
   if(document.getElementById(''+i).style.display=="block")
   document.getElementById(''+i).innerHTML="Hamdun Soft Is Clear Now";           
 }
 </script>
</html>

Answer 5

Answer №3

Make sure to use

document.getElementById(i).style.display==""

instead, as the "display" property defaults to an empty string when not specified initially.

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

Answer 6

Make sure to use

document.getElementById(i).style.display==""

instead, as the "display" property defaults to an empty string when not specified initially.

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

How to use JavaScript to identify the CSS property value of an HTML element

Answer №1

Answer №2

Answer №3

Similar questions

Locating elements with Selenium Webdriver using xpath

Upon refreshing the page in Javascript, the element mysteriously vanishes without a trace

There seems to be a lack of information appearing on the table

What is the code to incorporate a color using PHP?

Is there a way to adjust the orientation of a <video> element without affecting the orientation of the video controls?

Why does the old component of the router still receive and handle events when <router-view/> changes?

Color the area entirely in black

ASP TextChanged event is not triggering unless the user presses the Enter key or tabs out

Reorganize the layout of elements based on the array of element IDs

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

Guide to displaying a quick message and then redirecting the page upon clicking a button in ASP.NET

Skewed top-left border surrounds the element with a dashed design

The component fails to display during my testing efforts

What is the proper way to bind CoreUI's CSwitch component?

Custom date formatting with jQuery table sorting

Convert Binary Data to PDF Using Javascript Through Streaming

What is the best way to align two items where one is centered and the other is positioned to the left?

Update the state within a callback to display corresponding content in a React component

Problem encountered with AngularJS html5mode URL functionality

Managing time in an Angular application using Typescript