通过JavaScript检测html元素的CSS属性值

Detecting CSS property value of a html element by JavaScript

本文关键字：CSS 属性 元素 JavaScript 检测 html 通过      更新时间：2023-09-26

取消通知它是可以的，但if没有执行。这里是程序堆栈。有没有办法检测div的显示属性是"bloc"还是"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";           
 }

哦！请记住，从id＝1到10的div，一个display="block"，所有9都是"none"。我用另一个JavaScript程序做到了这一点。但现在我需要检测"块"。储罐。

问题是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>

注意：首先检查elem.currentStyle，因为IE可以使用它。

正如Zigmantas所说，问题出在id上。在HTML4中，id需要以字母开头。即使HTML5中允许数字ID，也可能出现其他问题。

请注意，需要在元素上显式设置样式。在本例中，第三个div确实具有样式，但不是内联的，因此它没有被选中。第一个是，正如你所要求的。

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

尝试document.getElementById(i).style.display==""，因为"display"在初始时没有指定，所以它将默认值设置为"。

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

相关文章：