CSS에서는 객체의 너비와 높이 속성값을 다음처럼 기본/최소/최대값을 나누어 지정할 수 있다.

#content {
width: auto; /* 기본 너비 */ min-width: 300px; /* 최소 너비 */ max-width: 600px; /* 최대 너비 */ height: auto; /* 기본 높이 */ min-height: 100px; /* 최소 높이 */ max-height: 300px; /* 최대 높이 */ }

  다음은 CSS를 쓰지 않고 자바스크립트로 너비/높이 속성값을 지정하는 예제이다.


<html>
<body> <div id="box""></div> </body> <script type="text/javascript"> var obj = document.getElementById("box"); obj.style.width = "auto"; obj.style.minWidth = "300px"; obj.style.maxWidth = "600px"; obj.style.height = "auto"; obj.style.minHeight = "100px"; obj.style.maxHeight = "200px"; obj.style.border = "1px solid #000"; var i=0; setTimeout("num()",10); function num() { obj.innerHTML += ++i%10 + " "; if ( i > 600) {return false;} else {setTimeout("num()",10);} } </script> </html>

[예제]

  예제에서는 setTimeout() 함수를 되돌이 함수(재귀 함수, 자기 호출 함수)로 엮어서 글상자에 숫자가 차근차근 채워지게 하였다. 불여우(firefox), 크롬(chorome), 사파리(safari) 등에서는 글상자에 숫자가 차면서 너비와 높이가 늘어나는 모습을 볼 수 있다. 누비개(브라우저)의 창을 늘이거나 줄일 때에도 자바스크립트로 지정한 최소/최대 크기값에 맞게 글상자가 바뀐다.

  하지만 인터넷 탐색기(IE)는 아직 9.0판까지 max-width, min-width 속성값이 잘 먹히지 않는다. 여러 객체들이 얽혀 있을 때에는 효력이 있기도 하지만, 객체 하나만으로는 바라는 효과를 내기는 어렵다. 그래서 인터넷 탐색기는 문서 객체본(DOM)의 width 또는 height 값을 건드려 객체의 최대/최소 크기를 조절하여야 하므로, maxWidth 등으로 효과를 볼 수 있는 누비개들보다 자바스크립트 처리문을 복잡하게 엮어야 할 수 있다.

2013/02/02 23:19 2013/02/02 23:19
얽힌 글타래
<그물누리 / 자바스크립트> 글갈래의 다른 글
글 걸기 주소 : 이 글에 다른 글을 걸 수 없습니다

덧글을 달아 주세요