티스토리 뷰
보임 필터 선택자
화면에 보이거나 보이지 않는 요소를 찾습니다.
보임 필터 선택자(Visibility Filters)
visibility:hidden;이나 opacity:0;은 위치가 제거되지 않았기 때문에 :hidden 선택자에게 선택되지 않습니다.
컨텐츠를 보이지 않게 하는 방법
- display:none;
- visibility:hidden;
- opacity:0;
- width:0; height:0;
- form 요소 중에 type="hidden"
- 부모 요소가 보이지 않거나 숨겨져 있을 때
보임 필터 선택자
| 종류 | 설명 |
|---|---|
| :hidden | 보이지 않는 요소를 선택합니다. |
| :visible | 보이는 요소를 선택합니다. |
Sample : 보임 필터 선택자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery)</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
function show( ){
$("li:hidden").show(1000);
};
setTimeout("show()" ,1000);
</script>
</head>
<body>
<h3>기본 태그를 선택하는 방법</h3>
<div class="list">
<ul class="list2">
<li class="one1" style="display: none;">web</li>
<li class="one2" style="opacity:0;">one2</li>
<li class="one3" style="visibility:hidden;">one3</li>
<li class="one4">one4</li>
<li class="one5">one5</li>
<li class="one6">one6</li>
<li class="one7">one7</li>
<li class="one8">one8</li>
</ul>
</div>
</body>
</html>
- TAG
- 보임 필터 선택자
댓글