用JavaScript檢測html元素的CSS屬性值

Question

直到警報可以，但是if沒有執行。 這里是程序堆棧。 有什么方法可以檢測div的display屬性，即“ 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，一個人的顯示=“ block”，而所有9個都是“ none”。 我是用另一個JavaScript程序完成的。 但是現在我需要檢測“塊”之一。 戰車

Answer 1

問題是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>

注意：因為IE可以使用this，所以首先檢查elem.currentStyle 。

Answer 2

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

Answer 3

請嘗試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">

用JavaScript檢測html元素的CSS屬性值

問題描述

3 個解決方案

解決方案1
1 已采納 2014-10-14 06:59:27

解決方案2
1 2014-10-14 07:09:09

解決方案3
0 2014-10-14 07:37:27

用JavaScript檢測html元素的CSS屬性值

問題描述

3 個解決方案

解決方案1 1 已采納 2014-10-14 06:59:27

解決方案2 1 2014-10-14 07:09:09

解決方案3 0 2014-10-14 07:37:27

解決方案1
1 已采納 2014-10-14 06:59:27

解決方案2
1 2014-10-14 07:09:09

解決方案3
0 2014-10-14 07:37:27