Selectors-Visibility Filter

Posted on Edited on In Views: Disqus:

 

一、:hidden Selector

用來取得hidden元素，與:visible Selector是完全對立的。

 

元素被判定是hidden的條件有

1、其CSS display value是none。

2、form元素帶有type="hidden"的屬性。

3、width and height都被指定為0。

4、其父元素被設定為hidden，所以子元素當然是被隱藏囉。

 

二、:visible Selector

用來取得visible元素，與:hidden Selector是完全對立的。

 

元素被判定是visible的條件有

1、CSS的visibility屬性被設定成hidden或是opacity屬性被設定成0的話，

則會被視為visible，因為該元素在頁面上仍然佔有空間。

2、而元素在動畫開始至結束，如果被hidden的話，也會視為visible。

3、一個元素不帶文字內容也是會被視為visible，如下範例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
    <p>aaa</p>
    <p></p>
    <script>
        $("p:visible").text("visible");
    </script>
</body>
</html>