개체의 계산된 너비를 반환하거나 설정한다.

인수
: (속성 정수값/백분율)
속성값은 개체의 너비를 픽셀단위나 백분율로 나타내는 정수값 혹은 백분율 수치값이다.

(정수값) 개체의 너비를 픽셀단위로 나타낸다.
(백분율) 개체의 너비를 모체의 너비에 대한 상대적인 백분율로 나타낸다.

이 속성은 읽기/쓰기이며 디폴트값은 없다.

특기

img 개체에 width나 height 속성이 한가지만 지정되면, img는 지정된 width나 height와 원래 파일의 실제 픽셀단위 너비나 높이에 비례하여 지정하니 않은 속성 높이나 너비를 자동적으로 결정한다.

경우 원본 파일의 이미지 크기(픽셀) 100*50 (W*H) 100*200 (W*H) 100*50 (W*H)
지정된 이미지 너비 20mm 20mm 지정없음
지정된 이미지 높이 지정없음 지정없음 20px
결과 결과 이미지 너비 20mm 20mm 40px ((100/50) * 20px)
결과 이미지 높이 10mm ((50/100) * 20mm) 40mm ((200/100) * 20mm) 20px

img 개체에 width나 height 속성을 자정하고 원본 이미지 파일의 너비와 높이가 같으면, 결과 이미지의 너비와 높이도 같다.

img 개체에 width와 height 속성을 모두 지정하면, 이미지의 너비와 높이는 강제적으로 지정된 것들과 같이되어 원본과 다른 비율이되어 표현된다.

백분율로 지정하면 너비와 높이는 모체 개체의 너비나 높이에 대한 비율로 계산하여 표현할 수 있지만, 이 속성은 항상 픽셀단위이다.

pixelWidth나 posHeight 속성을 사용하여 width, height 속성을 스트립트로 지정하면 수치적으로 계산되어 표현된다.
높이와 너비를 탄력적으로 변경하려면 원본 값들을 width와 height 애트리뷰트로 설정하는 대신 스타일로 지정하여야 한다.(예: style="height:200;width:200;")

적용
개체scriptHTML규격IE
참고

이 속성은 HTML 4.0와 (영문) W3C DOM Level 1(Document Object Model)에서 정의되었다.



imgObj.width=
<IMG id="imgObj" src="../../gif/flower.jpg" width="200"><BR>
<BUTTON onClick="imgObj.width='100';showA.innerText=imgObj.width">width=100</BUTTON>
<BUTTON onClick="imgObj.width='200';showA.innerText=imgObj.width">width=200</BUTTON>
<BUTTON onClick="imgObj.width='300';showA.innerText=imgObj.width">width=300</BUTTON>
<DIV>imgObj.width=<SPAN id=showA><SCRIPT>document.write(imgObj.width=200)</SCRIPT></SPAN></DIV>


칸 11
칸 12
칸 21 칸 22

결과 .width .height .style.width .style.height 
<TABLE id="tableObj" width="90%" height="100" style="width:90%;height:100" border="1" bgcolor="#ffffdd">
<TR>
<TD id="td11Obj" width="90%" height="80%" style="width:90%;height:80%">
<MARQUEE id="marqueeObj" width="90%" height="20" style="border:solid 1 blue;width:90%;height:20">
<IMG id="img1Obj" src="../../gif/rfexample.gif" width="50" height="18" style="width:50;height:18">
</MARQUEE><BR>
칸 11
</TD>
<TD id="td12Obj" width="20%" style="width:20%">
<IMG src="../../gif/rfexample.gif" width="50" height="18"><BR>칸 12</TD>
</TR>
<TR>
<TD id="td21Obj" height="20%" style="height:20%">칸 21</TD>
<TD id="td22Obj">칸 22</TD>
</TR>
</TABLE><BR>

<TABLE border=1 width=90%>
<TR>
<TH>결과</TH>
<TH>.width</TH>
<TH>.height</TH>
<TH>.style.width</TH>
<TH>.style.height</TH>
</TR>
<COL style="color:navy;font-weight:bold;background-color:eee">
<SCRIPT>
str='<TR><TD>tableObj</TD><TD>'+tableObj.width+'</TD><TD>'+tableObj.height+'</TD>';
str+='<TD>'+tableObj.style.width+'</TD><TD>'+tableObj.style.height+'</TD></TR>';
str+='<TR><TD>td11Obj</TD><TD>'+td11Obj.width+'</TD><TD>'+td11Obj.height+'</TD>';
str+='<TD>'+td11Obj.style.width+'</TD><TD>'+td11Obj.style.height+'</TD></TR>';
str+='<TR><TD>td12Obj</TD><TD>'+td12Obj.width+'</TD><TD>'+td12Obj.height+'</TD>';
str+='<TD>'+td12Obj.style.width+'</TD><TD>'+td12Obj.style.height+'</TD></TR>';
str+='<TR><TD>td21Obj</TD><TD>'+td21Obj.width+'</TD><TD>'+td21Obj.height+'</TD>';
str+='<TD>'+td21Obj.style.width+'</TD><TD>'+td21Obj.style.height+'</TD></TR>';
str+='<TR><TD>td22Obj</TD><TD>'+td22Obj.width+'</TD><TD>'+td22Obj.height+'</TD>';
str+='<TD>'+td22Obj.style.width+'</TD><TD>'+td22Obj.style.height+'</TD></TR>';
str+='<TR><TD>marqueeObj</TD><TD>'+marqueeObj.width+'</TD><TD>'+marqueeObj.height+'</TD>';
str+='<TD>'+marqueeObj.style.width+'</TD><TD>'+marqueeObj.style.height+'</TD></TR>';
str+='<TR><TD>img1Obj</TD><TD>'+img1Obj.width+'</TD><TD>'+img1Obj.height+'</TD>';
str+='<TD>'+img1Obj.style.width+'</TD><TD>'+img1Obj.style.height+'</TD></TR>';
document.write(str);
</SCRIPT>
</TABLE>