스타일 표시 속성

예시

<div> 요소가 표시되지 않도록 설정합니다.

document.getElementById("myDIV").style.display = "none";

정의 및 사용

display 속성은 요소의 표시 유형을 설정하거나 반환합니다.

HTML의 요소는 대부분 "인라인" 또는 "블록" 요소입니다. 인라인 요소는 왼쪽과 오른쪽에 부동 콘텐츠가 있습니다. 블록 요소는 전체 줄을 채우고 왼쪽이나 오른쪽에 아무 것도 표시할 수 없습니다.

display 속성을 사용하면 작성자가 요소를 표시하거나 숨길 수도 있습니다. 가시성 속성 과 유사합니다 . 그러나 를 설정 display:none하면 전체 요소가 숨겨지고 요소 visibility:hidden의 내용은 보이지 않지만 요소는 원래 위치와 크기로 유지됨을 의미합니다.

팁: 요소가 블록 요소인 경우 표시 유형도 float 속성으로 변경할 수 있습니다.

브라우저 지원

Property
display	Yes	Yes	Yes	Yes	Yes

통사론

표시 속성을 반환합니다.

object.style.display

표시 속성을 설정합니다.

object.style.display = value

속성 값

Value	Description
block	Element is rendered as a block-level element
compact	Element is rendered as a block-level or inline element. Depends on context
flex	Element is rendered as a block-level flex box. New in CSS3
inline	Element is rendered as an inline element. This is default
inline-block	Element is rendered as a block box inside an inline box
inline-flex	Element is rendered as a inline-level flex box. New in CSS3
inline-table	Element is rendered as an inline table (like <table>), with no line break before or after the table
list-item	Element is rendered as a list
marker	This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
none	Element will not be displayed
run-in	Element is rendered as block-level or inline element. Depends on context
table	Element is rendered as a block table (like <table>), with a line break before and after the table
table-caption	Element is rendered as a table caption (like <caption>)
table-cell	Element is rendered as a table cell (like <td> and <th>)
table-column	Element is rendered as a column of cells (like <col>)
table-column-group	Element is rendered as a group of one or more columns (like <colgroup>)
table-footer-group	Element is rendered as a table footer row (like <tfoot>)
table-header-group	Element is rendered as a table header row (like <thead>)
table-row	Element is rendered as a table row (like <tr>)
table-row-group	Element is rendered as a group of one or more rows (like <tbody>)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

기술적 세부 사항

기본값:	인라인
반환 값:	요소의 표시 유형을 나타내는 문자열
CSS 버전	CSS1

더 많은 예

예시

표시 속성과 가시성 속성의 차이점:

function demoDisplay() {
document.getElementById("myP1").style.display = "none";
}

function demoVisibility() {
document.getElementById("myP2").style.visibility = "hidden";
}

예시

요소 숨기기 및 표시 간 전환:

function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
}
}

예시

"인라인", "차단" 및 "없음"의 차이점:

function myFunction(x) {
var whichSelected = x.selectedIndex;
var sel = x.options[whichSelected].text;
var elem = document.getElementById("mySpan");
elem.style.display = sel;
}

예시

<p> 요소의 표시 유형을 반환합니다.

alert(document.getElementById("myP").style.display);

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References