getBoundingClientRect 브라우저 간 구현
4312 단어 client
<head>
<script type="text/javascript">
function GetOffset (object, offset) {
if (!object)
return;
offset.x += object.offsetLeft;
offset.y += object.offsetTop;
GetOffset (object.offsetParent, offset);
}
function GetScrolled (object, scrolled) {
if (!object)
return;
scrolled.x += object.scrollLeft;
scrolled.y += object.scrollTop;
if (object.tagName.toLowerCase () != "html") {
GetScrolled (object.parentNode, scrolled);
}
}
// always return 1, except at non-default zoom levels in IE before version 8
function GetZoomFactor () {
var factor = 1;
if (document.body.getBoundingClientRect) {
// rect is only in physical pixel size in IE before version 8
var rect = document.body.getBoundingClientRect ();
var physicalW = rect.right - rect.left;
var logicalW = document.body.offsetWidth;
// the zoom level is always an integer percent value
factor = Math.round ((physicalW / logicalW) * 100) / 100;
}
return factor;
}
function GetBox () {
var div = document.getElementById ("myDiv");
if (div.getBoundingClientRect) { // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
var rect = div.getBoundingClientRect ();
x = rect.left;
y = rect.top;
w = rect.right - rect.left;
h = rect.bottom - rect.top;
if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
// the bounding rectangle include the top and left borders of the client area
x -= document.documentElement.clientLeft;
y -= document.documentElement.clientTop;
var zoomFactor = GetZoomFactor ();
if (zoomFactor != 1) { // IE 7 at non-default zoom level
x = Math.round (x / zoomFactor);
y = Math.round (y / zoomFactor);
w = Math.round (w / zoomFactor);
h = Math.round (h / zoomFactor);
}
}
}
else {
// older Firefox, Opera and Safari versions
var offset = {x : 0, y : 0};
GetOffset (div, offset);
var scrolled = {x : 0, y : 0};
GetScrolled (div.parentNode, scrolled);
x = offset.x - scrolled.x;
y = offset.y - scrolled.y;
w = div.offsetWidth;
h = div.offsetHeight;
}
alert ("Left: " + x + "
Top: " + y + "
Width: " + w + "
Height: " + h);
}
</script>
</head>
<body>
<div style="height:200px; width:300px; overflow:auto;">
<div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
You can get the bounding rectangle of this element
relative to the top left corner of the client area with the button below.<br />
Use the scrollbars to test the placement of the bounding rectangle in different positions.
</div>
<div style="width:1000px; height:1000px;"></div>
</div>
<br />
<button onclick="GetBox ();">Get the placement of the element with red border!</button>
</body>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[Web] HTTP란 무엇인가 - 1Hypertext는 쉽게 말해 하이퍼링크가 들어간 텍스트, 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트라고 이해하면 된다. Hypertext가 쓰인 기술 중 가장 중요한 두 가지가 바로 HTML과 HTTP이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.