判断网页中element是否可见的方法汇总

方法一： .is(":hidden") 和.is(":visible")

用法：

 var box = $('.box');
 console.log(box.is(':hidden'));//返回true或false

兼容性： IE5+
缺点： 消耗CPU最多的，这个函数效率很低！

方法二： jQuery的.css(‘display’)=="none"

用法： 可以自己写个isHidden方法，直接用的style.display == “none”

 var box = $('.box');
 console.log(box.css('display')=="none");//返回true或false

方法三： JS的getBoundingClientRect()方法
getBoundingClientRect用于获取某个html元素的大小及其相对于视口的位置集合。
这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。

（注：当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。）
用法：

  var boxjs = document.getElementById('box');//JavaScript的Id选择器
  console.log(boxjs);//<div id="box"></div> DOM节点
  console.log(boxjs.getBoundingClientRect());//DOMRect {x: 8, y: 8, width: 100, height: 100, top: 8, …}
 
 注意：jQuery选择器选出来的对象不认识它，会报错。 
  var boxjQ = $('.box'); //jQuery选择器
  console.log(boxjQ);//object object
  console.log(boxjQ.getBoundingClientRect());//报错,boxjQ.getBoundingClientRect not a function.

我们利用它计算element的高度，如果为0，即可认为element不可见。比如这样：

  var box = document.getElementById('box');
  console.log(box.getBoundingClientRect().height==0);//返回true就意味着不可见

兼容性： IE5+

缺点： ①这个属性频繁计算会引发页面的重绘，可能会对页面的性能造成影响； ②jQuery选择器返回的对象会报错，对象不支持“getBoundingClientRect”属性或方法。