개체가 표현되는가를 반환하거나 설정한다.

인수
cssSelector : (스타일 선택자)
속성을 가질수 있는 엘레멘트()나 클라스(class) 이름 혹은 인식자(id)이다.

: (속성 문자열)
스타일 속성은 개체가 표현되는가를 나타내는 문자열이다.

block 개체가 블럭엘레멘트로 표현된다.
none 개체가 디스플레이되지 않는다.
inline 디폴트이며, 개체가 내용의 크기에따라 인라인 엘레멘트로 표현된다.
inline-block 개체가 인라인으로 표현되지만, 개체의 내용은 블럭 엘레멘트로 표현된다. 인접 인라인 엘레멘트는 간격을 허용하며 같은 라인에 표현된다.
list-item IE6 이후, 개체가 블럭엘레멘트로 표현되고 목록항목 마크가 추가된다.
table-header-group 테이블의 머릿부분(header)이 항상 모든 줄과 줄의 구룹보다 먼저, 그리고 윗 제목(caption) 아래 디스플레이된다. 이 머릿부분은 테이블이 확장된 각 페이지에 디스플레이된다.
table-footer-group 테이블의 바닥부분(footer)이 항상 모든 줄과 줄의 구룹 다음, 그리고 바닥 제목(caption) 위에 디스플레이된다. 이 바닥부분은 테이블이 확장된 각 페이지에 디스플레이된다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 다음과 같으며 그 외는 inline이다.

ADDRESS BLOCKQUOTE BODY CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL XMP block
FRAME TBODY TFOOT THEAD none
LI list-item

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

IE6에서 이 속성은 list-item 값을 지원한다.

IE4.0에서, block, inline과 list-item 값들은 명시적으로 지원하지 않지만 엘레멘트는 표현된다.

IE5에서, block과 inline 값들은 명시적으로 지원된다.

IE5.5와 이전버전에서, LI 엘레멘트의 이 속성의 디폴트값은 block이다.

IE5.5에서 inline-block 값을 지원한다. 이 값을 사용하여 width이나 height 지정없이 개체에 배치(layout )를 만들 수 있다.

모든 보이는 object들은 블럭이거나 인라인 엘레멘트이다. 예를들어 div 개체는 블럭 엘레멘트이고, span 개체는 인라인 엘레멘트이다. 블럭엘레멘트는 전형적으로 시작하면서와 끝나면서 새로운 줄이 삽입되며, 다른 블럭엘레멘트나 인라인 엘레멘트를 포함할 수 있다. 이에 반해 인라인 엘레멘트는 새로운 줄을 삽입하지 않고, 인라인 엘레멘트나 데이터을 포함할 수 있으나 블럭 엘레멘트를 포함할 수 없다. display 속성을 변경하면 주위 내용의 배치에 영향을 준다.

visibility 속성과는 달리, display가 none 값을 가지면 스크린 상에서 개체를 위한 공간이 확보되지 않는다.

table-header-group와 table-footer-group 값들은 복수 페이지에서 tHead와 tFoot 개체들의 내용을 각 페이지에 디스플레이할 수 있도록 지정하기 위하여 사용될 수 있다.

적용
개체scriptCSS IE 버전
참조

이 속성은 CSS1(Cascading Style Sheets, Level 1)에서 정의되었다.


블럭 문장 중의 SPAN 문장이 포함되어 있다.

spanObj.style.display=결과 표시창
<P style="border:solid 1 blue;padding:5">블럭 문장 중의
<SPAN id="spanObj" style="color:red;border:solid 1 red">SPAN 문장</SPAN>이 포함되어 있다.</P>
<BUTTON onclick="spanObj.style.display='inline';showA.innerText=spanObj.style.display">inline</BUTTON>
<BUTTON onclick="spanObj.style.display='block';showA.innerText=spanObj.style.display">block</BUTTON>
<BUTTON onclick="spanObj.style.display='none';showA.innerText=spanObj.style.display">none</BUTTON>
<DIV>spanObj.style.display=<SPAN id=showA style="color:blue">결과 표시창</SPAN></DIV>
칸 1-1칸 1-2칸 1-3
칸 2-1칸 2-2칸 2-3
칸 3-1칸 3-2칸 3-3 
<SCRIPT>
function doApply(){
  cell12.style.display="none";
  cell22.style.display="block";
  cell32.style.display="inline";
  showAll();
}
function showAll(){
  str='cell12.style.display='+cell12.style.display+'<BR>';
  str+='cell22.style.display='+cell22.style.display+'<BR>';
  str+='cell32.style.display='+cell32.style.display+'<BR>';
  str+='rowObj.cells.length='+rowObj.cells.length+'<BR>';
  showB.innerHTML=str;
}
</SCRIPT>
<TABLE border=1 width=400>
<TR id=rowObj>
<TD>칸 1-1</TD><TD id="cell12">칸 1-2</TD><TD>칸 1-3</TD>
</TR>
<TR>
<TD>칸 2-1</TD><TD id="cell22">칸 2-2</TD><TD>칸 2-3</TD>
</TR>
<TR>
<TD>칸 3-1</TD><TD id="cell32">칸 3-2</TD><TD>칸 3-3</TD>
</TR>
</TABLE>
<INPUT type=button onclick="doApply()" value="적용해 보라">
<INPUT type=button onclick="cell12.style.display=cell22.style.display=cell32.style.display='';showAll()" value="원상 회복">
<DIV id=showB><SCRIPT>showAll()</SCRIPT></DIV>