如何拿到当前显示的节点？

Question

<ul>
<li></li> //display:block;
<li></li> //display:none;
</ul>

如何用原生js拿到当前显示的节点？谢谢

Answer 1

非内联样式 style 属性是拿不到的，所以用 getComputedStyle
IE有兼容性问题，可以使用 currentStyle ，参考 http://stackoverflow.com/ques...

var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
    if (getComputedStyle(lis[i]).display === 'none') {
        console.log(lis[i], ' //display:none;')
    }
}

Answer 2

建议用jq吧
循环后 判断.is(":hidden")

o.style.display 只能获取内联样式, 如果是通过样式表或class控制的样式获取不到.

Answer 3

遍历咯，判断style.display=="none"

Answer 4

试试这个

var liArray = Array.from(document.getElementsByTagName('li'));
var displayLis =  liArray.filter(function(li){
    return li.style.display == 'block';
});

Answer 5

内联样式遍历style.display;
非内联样式遍历宽高等尺寸属性!==0；

Answer 6

html:

<ul>
    <li style="display:none" class="myLi">a</li>
    <li style="display:block" class="myLi">b</li>
</ul>

JS:

var blockLi = document.getElementsByTagName("li");
for(var i = 0; i < blockLi.length; i++) {
    if(blockLi[i].style.display == 'block') {
      alert(blockLi[i].innerHTML)
  }
}

Answer 7

    

var li= document.getElementsByTagName('li')  // //得到一个数组  
  for(var n=0; n < li.length; n++){
    if(li[n].style.display == 'none'){
        //你的逻辑判断
    }
  }