[자바스크립트] 객체의 기본/최소/최대 너비 및 높이 지정하기
그물터 관리/JavaScript
2013/02/02 23:19
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 #888";
obj.style.color = "#888";
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 등으로 효과를 볼 수 있는 누비개들보다 자바스크립트 처리문을 복잡하게 엮어야 할 수 있다.
![미리보기 그림 - [자바스크립트] 가운뎃점 폭 넓히기](/thumbnail/1/JP_Thumb/coverphoto/thumb_1915094458.png.webp)
![미리보기 그림 - [자바스크립트] 나란한 두 객체의 높이 맞추기](/image/4056_2.png)
![미리보기 그림 - [자바스크립트] 웹 화면이 이동 기기(모바일 기기) 상태인지를 가리는 함수](/thumbnail/1/JP_Thumb/coverphoto/thumb_1327573450.png.webp)
덧글을 달아 주세요