이 함수의 역활은 화면에 로딩된 3개의 이미지 정보를 DOM 객체를 이용해 가져온후
배열에 담고 그 배열을 반복하여 이미지 정보 문자열을 만든다.
그렇게 만든 정보는 div 태그 id = output 사이에 html 문자열을 삽입해서 표현해준다.
<script type="text/javascript">
<!--
function init()
{
var arrImages = new Array(3);
arrImages[0] =
document.getElementById("image1");
arrImages[1] =
document.getElementById("image2");
arrImages[2] =
document.getElementById("image3");
var objOutput =
document.getElementById("output");
var strHtml = "<ul>";
for (var i = 0; i < arrImages.length; i++)
strHtml += "<li>image" + (i+1)
+
": height=" +
arrImages[i].height +
", width=" +
arrImages[i].width +
", style.height=" +
arrImages[i].style.height +
", style.width=" +
arrImages[i].style.width +
"<\/li>";
"<\/ul>";
objOutput.innerHTML = strHtml;
}
//-->
</script>
</head>
<body onload="init();">
<p>Image 1: no height, width, or style <br>
<img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
</p>
<p>Image 2: height="50", width="500",
but no style <br>
<img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif"
height="50" width="500">
</p>
<p>Image 3: no height, width, but
style="height: 50px; width: 500px;"<br>
<img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif"
style="height:
50px; width: 500px;">
</p>
<div id="output"> </div>
결과 화면이다.
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| DOM 예제 : click event 를 DOM 객체로 제어한다. (0) | 2009.02.28 |
|---|---|
| DOM 예제 : 페이지에 로딩된 모든 stylesheet 정보를 접근해서 변경할수있다. (0) | 2009.02.22 |
| DOM 예제 : 특정 태그문의 stylesheets 정보를 변경해본다. (0) | 2009.02.22 |
| DOM 예제 : DOM 을 이용해서 이미지 객체정보를 변경하는 예제 (0) | 2009.02.22 |
| 프로젝트 나가서 주로 공통으로 쓰는 javascript common.js 내용 (0) | 2009.02.19 |
| Javascript 에서 알아야할 기초사항 (1) | 2009.02.18 |
| Select 박스 선택시 그 값을 알수 있는 코드 예제 (0) | 2009.02.17 |
| Javascript 에서 랜덤으로 배너를 출력하고 싶을 때 (0) | 2009.02.11 |
