如何按樣式屬性值獲取元素？

我需要使用「display：none」樣式獲取所有div元素，然後刪除所有這些元素。另外我需要選擇包含在#somecontainer元素中的div。必須在RAW中執行此操作。任何想法？如何按樣式屬性值獲取元素？

例如HTML：

<table id="listtabletemp"> 
    <thead> 
     <tr id="theader"> 
      <td id="theaderleft">loolz</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="" rel="13117025"> 
      <td><div><style> 
.ikthgjyhtr{display:none} 
.tVOx{display:inline} 
</style> 
       <div style="display:none">crap here</div> 
       <div></div> 
       <div></div> 
       <div style="display:none">crap here</div> 
       <div class="230">something good</div> 
       <div class="ikthgjyhtr">crap here</div> 
       <div style="display:none">crap here</div> 
       <div class="ikthgjyhtr">crap here</div> 
       <div style="display: inline">something good</div>something good 
       <div style="display: inline">something good</div> 
       <div class="21">something good</div> 
       <div style="display:none">crap here</div> 
       <div style="display:none">crap here</div> 
       <div style="display:none">crap here</div> 
       <div class="4">something good</div> 
       <div class="224">something good</div></div> 
      </td> 
     </tr> 
    </tbody> 
</table>

來源

2013-03-22 facebook-100000565381055

r你是什麼意思去除所有這些元素？如果他們有'display：none'，他們不會被刪除。或者你的意思是完全刪除它？在這種情況下，只需找到'div'並刪除'em。 – 2013-03-22 02:44:18

你是說你想刪除'el.style.display'？順便說一句：實際的術語是「香草js」：http://vanilla-js.com/ :) – kay 2013-03-22 02:45:10

@Kay從您的評論，它似乎是不是香草js，因爲你鏈接到一個框架。 – 2013-03-22 02:49:45

簡單，DOM的是你的朋友：

function removeDivs() { 
    var container = document.getElementById("somecontainer"); 
    var divs = container.getElementsByTagName("div"); 
    var empty = []; 
    var getStyle = function(obj, css){ 
     var style = null; 
     if(obj.currentStyle) { 
      style = obj.currentStyle[css]; 
     } else if(window.getComputedStyle) { 
      style = window.getComputedStyle(obj, null).getPropertyValue(css); 
     } 
     return(style); 
    }; 
    for(var i = 0, len = divs.length; i < len; i++) { 
     var div = divs[i]; 
     if(div && ((div.style.display && div.style.display == "none") || getStyle(div, "display") == "none")) { 
      empty.push(div); 
     } 
    } 
    for(var i = 0, len = empty.length; i < len; i++) { 
     var div = empty[i]; 
     div.parentNode.removeChild(div); 
    } 
}

來源

2013-03-22 02:57:11 faino

如果您需要檢查div是否具有CSS樣式顯示：沒有分配給它，那麼自div.style.display ===「」爲CSS分配顯示值後，它會變得更加複雜。 – HMR 2013-03-22 03:02:11

var len = divs.length; if（len> 0）{ 不必要的代碼 – vladkras 2013-03-22 03:02:51

@HMR很好的呼籲，我已經更新了這個功能來考慮這一點。 – faino 2013-03-22 03:04:56

快速和骯髒的，這裏的東西讓你開始：

http://jsfiddle.net/kttsJ/

var parent = document.getElementById('parent'); 
var items = parent.getElementsByTagName('DIV'); 
var hidden = []; 
for (var i in items){ 
    if ((items[i]).getAttribute !== undefined){ 
     if ((items[i]).hasAttribute('style')){ 
      if ((/display\:\s*none/gi).test(items[i].getAttribute('style'))){ 
       hidden.push(items[i]); 
      } 
     } 
    } 
} 

for (var i in hidden){ 
    hidden[i].parentNode.removeChild(hidden[i]); 
}

來源

2013-03-22 03:13:37 slamborne

如何按樣式屬性值獲取元素？

回答

相關問題