JavaScript 활용팁
HOME > WEB > JavaScript 활용팁
2010.10.05 / 19:39

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

귀안의주니
추천 수 198
동적 HTML 객체 모델 요소의 위치와 면적 계산 동적 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 (document.compatMode != "BackCompat"? document.documentElement : document.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>