DIV 표시 및 숨기기 속성 설정

$("#div").attr("style","display:block");
$("#div").attr("style","display:none");
$("#div").show();
$(".div")[0].style.display = 'none'; 
$(".div")[0].style.display = 'block';

visibility가 숨긴 대상은 대상이 보일 때 차지하는 물리적 공간을 보존하고 디스플레이는 보존하지 않습니다.
←SS visibility:hidden

←SS display:none

visibility 속성으로 숨겨진 대상이 표시될 때의 위치를 제어하고 디스플레이는 없습니다.
display 속성 설정 요소의 표시 방식, 대응하는 스크립트 특성은 display, 선택할 수 있는 값은 none, Block, inline
none은 요소를 숨깁니다. 요소가 보일 때의 공간을 남기지 않습니다.
블록 방식으로 요소 표시
inline은 요소를 인라인 방식으로 표시합니다.
inline-block 대상은 내장 요소로 표시되지만, 모든 하위 대상은 블록 요소로 표시되며, 인접한 내장 요소는 같은 줄에 표시되며, 빈칸을 허용합니다.
list-item은 블록 요소를 목록 대상으로 표시하고 항목 문장부호를 추가할 수 있습니다.(IE6.0+ 지원 필요)
table-header-group은 요소를 표 제목 그룹으로 표시합니다. 이것은 tHead 요소와 같습니다.
table-footer-group은 tFoot 요소에 해당하는 요소를 테이블 바닥글 그룹으로 표시합니다.
visibility 속성 설정은 요소를 표시할 지 여부입니다. 대응하는 스크립트 특성은visibility이고 선택할 수 있는 값은 inherit,hidden,visible입니다. 각 값에 대한 설명은 다음과 같습니다.
inherit는 부모 요소의visibility 속성 설정을 계승합니다.
hidden은 요소를 숨기지만, 차지하는 공간을 보존합니다.
visible 표시 요소(기본값)

좋은 웹페이지 즐겨찾기