TAG clientHeight,
clientLeft,
clientTop,
clientWidth,
DOM,
javascript,
offsetHeight,
offsetWidth,
객체,
자바스크립트
동적 HTML 객체 모델 요소의 위치와 면적 계산Understanding Properties That Measure Element Dimension and Location
.jpg)
.jpg)
.jpg)
예제 테스트 링크
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">© 2007 Microsoft Corporation. All rights reserved. Terms of use.</A> <!-- END_PAGE_FOOTER --> </DIV> </BODY> </HTML> |
(0) 
(0)
댓글을 달아 주세요