동적 HTML 객체 모델 요소의 위치와 면적 계산

JavaScript 2009. 1. 12. 13:21

http://blog.hompy.info/559

동적 HTML 객체 모델 요소의 위치와 면적 계산
Understanding Properties That Measure Element Dimension and Location

diagram of a sample page showing the DHTML Object Model properties that are related to the dimension and location of elements

diagram of a sample page showing the DHTML Object Model properties that are related to the dimension and location of elements
diagram of a sample page showing the DHTML Object Model properties that are related to the dimension and location of elements

예제 테스트 링크
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD><TITLE>Measure for Measure</TITLE>
<SCRIPT type="text/javascript">
<!--
var lastfunc = 1;
function split() {
switch(lastfunc) {
case 1: one(); break;
case 2: two(); break;
case 3: three(); break;
case 4: four(); break;
default: five(); break;
}
}
function iebody() {
// Sense the difference between Strict and Quirks mode
return (d0cument.compatMode != "BackCompat"? d0cument.d0cumentElement : d0cument.body);
}
function one() {
lastfunc = 1;
report.value = "The style object contains information that was set in the inline style to position the object. The following values are reported for the various position and dimension properties on the style object for the DIV above:" + "\n\n";
report.value += " mydiv.style.top (string) = " + mydiv.style.top + "\n";
report.value += " mydiv.style.left (string) = " + mydiv.style.left + "\n";
report.value += " mydiv.style.height (string) = " + mydiv.style.height + "\n";
report.value += " mydiv.style.width (string) = " + mydiv.style.width + "\n";
report.value += " mydiv.style.pixelTop = " + mydiv.style.pixelTop + "\n";
report.value += " mydiv.style.pixelLeft = " + mydiv.style.pixelLeft + "\n";
report.value += " mydiv.style.pixelHeight = " + mydiv.style.pixelHeight + "\n";
report.value += " mydiv.style.pixelWidth = " + mydiv.style.pixelWidth + "\n";
report.value += " mydiv.style.posTop = " + mydiv.style.posTop + "\n";
report.value += " mydiv.style.posLeft = " + mydiv.style.posLeft + "\n";
report.value += " mydiv.style.posHeight = " + mydiv.style.posHeight + "\n";
report.value += " mydiv.style.posWidth = " + mydiv.style.posWidth + "\n";
// Cancel the generic click event for the body
window.event.cancelBubble = true;
}
function two() {
lastfunc = 2;
report.value = "Offset properties for the DIV above: \n";
report.value += " mydiv.offsetLeft = " + mydiv.offsetLeft + "\n";
report.value += " mydiv.offsetTop = " + mydiv.offsetTop + "\n";
report.value += " mydiv.offsetHeight = " + mydiv.offsetHeight + "\n";
report.value += " mydiv.offsetWidth = " + mydiv.offsetWidth + "\n";
report.value += "Offset properties for the BODY: \n";
report.value += " offsetLeft = " + iebody().offsetLeft + "\n";
report.value += " offsetTop = " + iebody().offsetTop + "\n";
report.value += " offsetHeight = " + iebody().offsetHeight + "\n";
report.value += " offsetWidth = " + iebody().offsetWidth + "\n";
// Cancel the generic click event for the body
window.event.cancelBubble = true;
}
function three() {
lastfunc = 3;
report.value = "Scroll values for the DIV above: \n";
report.value += " mydiv.scrollLeft = " + mydiv.scrollLeft + "\n";
report.value += " mydiv.scrollTop = " + mydiv.scrollTop + "\n";
report.value += " mydiv.scrollHeight = " + mydiv.scrollHeight + "\n";
report.value += " mydiv.scrollWidth = " + mydiv.scrollWidth + "\n";
report.value += "Scroll values for the BODY: \n";
report.value += " scrollLeft = " + iebody().scrollLeft + "\n";
report.value += " scrollTop = " + iebody().scrollTop + "\n";
report.value += " scrollHeight = " + iebody().scrollHeight + "\n";
report.value += " scrollWidth = " + iebody().scrollWidth + "\n";
// Cancel the generic click event for the body
window.event.cancelBubble = true;
}
function four() {
lastfunc = 4;
report.value = "";
report.value += " clientHeight for the BODY: " + iebody().clientHeight + "\n";
report.value += " clientWidth for the BODY:" + iebody().clientWidth + "\n";
report.value += " clientTop for the BODY:" + iebody().clientTop + "\n";
report.value += " clientLeft for the BODY:" + iebody().clientLeft + "\n";
report.value += " clientHeight for this TEXTAREA:" + report.clientHeight + "\n";
report.value += " clientWidth for this TEXTAREA: " + report.clientWidth + "\n";
report.value += " clientTop for this TEXTAREA:" + report.clientTop + "\n";
report.value += " clientLeft for this TEXTAREA:" + report.clientLeft + "\n";
// Cancel the generic click event for the body
window.event.cancelBubble = true;
}
function five() {
lastfunc = 5;
report.value = "The following x and y values are passed on the event object for this mouse click event: \n";
report.value += " window.event.x = " + window.event.x + "\n";
report.value += " window.event.y = " + window.event.y + "\n";
report.value += " window.event.offsetX = " + window.event.offsetX + "\n";
report.value += " window.event.offsetY = " + window.event.offsetY + "\n";
report.value += " window.event.screenX = " + window.event.screenX + "\n";
report.value += " window.event.screenY = " + window.event.screenY + "\n";
report.value += " window.event.clientX = " + window.event.clientX + "\n";
report.value += " window.event.clientY = " + window.event.clientY + "\n";
// Cancel the generic click event for the body
window.event.cancelBubble = true;
}
-->
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/samples/samples.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
<STYLE type="text/css">
BODY {
margin:0;
border:10px solid #99ccff;
padding:10px;
font-family:arial;
font-size:70%;
background-color:white;
color:black;
}
BUTTON {
margin:2px;
}
#mydiv {
overflow:scroll;
margin:20px auto;
background-color:white;
padding:20px;
border:10px solid #99ccff;
font-size:150%;
}
#report {
margin-top:25px;
border:1px solid #cccccc;
font-family:arial;
width:90%;
}
</STYLE>
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->

<BODY onload="two()" onscroll="three()" onresize='split()' onclick="five()">
<DIV class="body">
<CENTER>

<!-- This DIV uses an inline style to test the style object above. -->
<DIV id="mydiv" onclick="one()" onscroll="three()" style="top:5px; left:5px; height:8em; width:90%;">
DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool! DHTML is so cool!
</DIV>

<button onclick=one()>Style Positions</button>
<button onclick=two()>Object Offset</button>
<button onclick=three()>Scroll Positions</button>
<button onclick=four()>Client Area</button>
<button onclick=five()>Event Object</button>

<TEXTAREA id="report" rows=12 style=""></TEXTAREA>

</CENTER>

<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
<p class="viewsource">[Right-click and choose View Source from the shortcut menu.] </p>
<A class="copyright" HREF="http://www.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm">&copy; 2007 Microsoft Corporation. All rights reserved. Terms of use.</A>
<!-- END_PAGE_FOOTER -->
</DIV>
</BODY>
</HTML>

'JavaScript' 카테고리의 다른 글

자바스크립트 이미지 회전, Image Rotate with CANVAS  (0) 2009.01.20
클립보드 복사 기능 구현을 위한 소스 코드  (0) 2009.01.19
자바스크립트, 모서리가 둥근 테이블 만들기.  (0) 2009.01.12
자바스크립트, 객체의 속성과 메소드와 이벤트 핸들러  (0) 2009.01.12
자바스크립트 createElement, insertBefore, replaceChild, appendChild  (0) 2009.01.12
Posted by 퓨전마법사
,

티스토리툴바