visible 선택자

선택자 :visible는 페이지에서 보이는 모든 요소를 선택합니다. visibility: hidden 또는 opacity: 0로 설정된 요소는 레이아웃에서 공간을 차지하므로 보이는 것으로 간주됩니다. 요소가 문서에서 공간을 차지하면 보이는 것으로 간주됩니다. 보이는 요소는 너비와 높이가 0이 아닙니다. :visible가 CSS 스펙에 속하지 않기 때문에, 최신 브라우저에서 성능을 향상시키려면 먼저 순수 CSS 선택자를 사용하여 요소를 필터링한 다음 .filter(':visible')를 적용하는 것이 좋습니다. 클래스와 같은 다른 방법으로 요소 가시성을 추적하는 것이 더 나은 성능을 보장할 수 있습니다.

구문

보이는 요소를 이렇게 선택합니다:

javascript$(':visible');

예시

버튼을 클릭하면 보이지 않는 사각형들을 보여줍니다. "보이는" 사각형을 클릭하면 배경색이 노란색으로 바뀝니다:

html<button id="show">표시</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

함께 보기