js判断元素是否隐藏或显示的几种方法

判断元素是否隐藏或显示，有以下几种方法：

方法一：通过获取元素display属性来实现

一般对display属性值得判断，只判断是否为'none'即可；因为元素分为 块级、行内元素，且显示元素的display属性值有多种不确定性。 如：

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === \'none\')
}

第二种方法：使用jquery的.is(":hidden")和is(":visible") 

如：

function judgeShowOrHide(){  
    alert($(\"#id\").is(\':visible\')); //判断是否显示  显示：true 隐藏：false  
    if($(\"#id\").is(\':hidden\')){  
        alert(\"隐藏了\");  
        //处理业务  
    }else{  
        alert(\"显示\");             
               //处理业务  
        }  
}  

通过以上事例可以知道判断显示隐藏的方法分别为：

$("#id").is(':visible');            true 为显示 false 为隐藏

$("#id").is(":hidden");         true 为隐藏 false 为显示

第三种方法: 判断当前元素的父元素的offsetParent属性

如：

var isHidden = function(element) {
    return (element.offsetParent === null);
};

经过自己实践确实可以使用这种方法来判断当前元素是否被隐藏，包括通过设置父元素为display:none以及自己本身为none的情况。但是如果是通过设置visibility:hidden则无法检测出。