정의 및 사용
디스플레이 속성 집합 또는 요소의 표시 형식을 반환합니다.
HTML의 요소가 대부분이다 "inline" 또는 "block" 요소 : 인라인 요소는 왼쪽과 오른쪽의 콘텐츠를 떠있다. 블록 요소가 전체 행을 채우고 것도 그 좌측 또는 우측에 디스플레이 될 수 없다.
디스플레이 속성도 표시하거나 요소를 숨길 수있는 저자 수 있습니다. 그것은 유사하다 가시성 속성입니다. 숨겨진 요소의 내용이 보이지 않는 것을 의미하지만 요소가 원래의 위치와 크기에 남아 : 그러나 디스플레이를 설정하지 않는 경우 : 가시성 동안 아무 것도, 그것은 전체 요소를 숨 깁니다.
Tip: 요소가 블록 요소의 경우, 그 표시 형태는 또한 플로트 속성으로 변경 될 수있다.
브라우저 지원
디스플레이 속성은 모든 주요 브라우저에서 지원됩니다.
통사론
디스플레이 속성을 반환합니다 :
object .style.display
디스플레이 속성을 설정 :
object .style.display= 속성 값 값 기술 block 요소는 블록 레벨 요소로 렌더링 compact 요소는 블록 레벨 또는 인라인 요소로 표현된다. 상황에 따라 다름 flex 요소는 블록 레벨 플렉스 박스로 렌더링됩니다. CSS3의 새로운 기능 inherit 디스플레이 속성 값은 부모 요소에서 상속 inline 요소는 인라인 요소로 표현된다. 이 기본이다 inline-block 요소는 인라인 상자 내부 블록 상자로 렌더링 inline-flex 요소는 인라인 (inline-level) 플렉스 박스로 렌더링됩니다. CSS3의 새로운 기능 inline-table 소자는 전 또는 후에 테이블 줄 바꿈으로 (같은 <표>) 인라인 테이블로 렌더링 list-item 요소리스트로서 렌더링 marker 이 값은 마커로 이전 또는 이후 콘텐츠 상자를 설정 (과 함께 사용 전과 :. 가상 엘레멘트 후 그렇지 않으면,이 값은 동일한 행 "인라인") none 요소는 표시되지 않습니다 run-in 요소는 블록 레벨 또는 인라인 요소로 표현된다. 상황에 따라 다름 table 요소는 이전과 이후 테이블 개행으로 (같은 <표>)는 블록 테이블로 렌더링 table-caption 소자가 나타난 자막로 렌더링 (같은 <자막>) table-cell 소자 (같은 표 셀로 렌더링 <td> 및 <제>) table-column 셀 소자의 열로 렌더링 (like <col>) table-column-group 요소는 하나 이상의 열들의 그룹으로 렌더링된다 (like <colgroup>) table-footer-group 소자 테이블 꼬리말 행으로 표현된다 (like <tfoot>) table-header-group 소자 테이블 헤더 행으로 표현된다 (like <thead>) table-row 요소 (<TR>처럼) 테이블 행으로 표현되는 table-row-group 요소는 하나 이상의 행의 그룹으로 표현된다 (like <tbody>) initial 기본값으로이 속성을 설정합니다. 초기 읽기에 대한 inherit 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기
기술적 세부 사항
기본값: 인라인 반환 값 : 요소의 표시 형태를 나타내는 문자열 CSS 버전 CSS1
더 예
예
디스플레이 속성과 가시성 속성의 차이 :
function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}
function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
} »그것을 자신을 시도
예
차이 "inline" , "block" 과 "none" :
function myFunction(x) {
var whichSelected = x.selectedIndex;
var
sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
} »그것을 자신을 시도
관련 페이지
CSS 자습서 : CSS 디스플레이 및 가시성
CSS 참조 : display property
<스타일 개체