當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

offsetTop，clientX，clientTop，clientWidth，offsetWidth 坐标，一次弄明白

發布時間：2023/11/27 生活经验 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 offsetTop，clientX，clientTop，clientWidth，offsetWidth 坐标，一次弄明白小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這幾個屬性都是IE火狐完全兼容的，不多說，看我測試結果便知：

【源碼如下】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title></title>

??? <script type="text/javascript">
??????? function Position(eve) {
??????????? var t = document.getElementById("div1");
??????????? var e = eve || event;
??????????? var DivOffsetTop = t.offsetTop; //=Top+MarginWidth=100+3=103
??????????? var DivOffsetleft = t.offsetLeft; //Left+MarginWidth=50+3=53
??????????? var EventTop = e.clientY;
??????????? var EventLeft = e.clientX;
??????????? var DivTop = t.style.top;
??????????? var DivLeft = t.style.left;
??????????? var DivClientTop = t.clientTop; //BorderWidth
??????????? var DivClientLeft = t.clientLeft; //BorderWidth
??????????? var DivClientWidth = t.clientWidth; //Width+2PaddingWidth=200+2*11=222
??????????? var DivClientHeight = t.clientHeight; //Height+2PaddingWidth=300+2*11=322
??????????? var DivOffsetWidth = t.offsetWidth; //=2BorderWidth+Width+2PaddingWidth=2*7+200+2*11=236
??????????? var DivOffsetHeight = t.offsetHeight; //=2BorderWidth+Height+2PaddingWidth=2*7+300+2*11=336
??????????? var BodyClientTop = document.body.clientTop;
??????????? var BodyClientLeft = document.body.clientLeft;
??????????? var DivWidth = t.style.width;
??????????? var DivHeight = t.style.height;
??????????? var DivBorderWidth = t.style.borderWidth;
??????????? var DivPaddingWidth = t.style.padding;
??????????? var DivMaginWidth = t.style.margin;
??????????? var R = "DivOffsetleft:" + DivOffsetleft + "--DivOffsetTop:" + DivOffsetTop; //103 53
??????????? R += "\nEventLeft:" + EventLeft + "--EventTop:" + EventTop; //>=103 >=53
??????????? R += "\nDivLeft:" + DivLeft + "--DivTop:" + DivTop; //100px 50px
??????????? R += "\nDivClientLeft:" + DivClientLeft + "--DivClientTop:" + DivClientTop; //7 7
??????????? R += "\nBodyClientLeft:" + BodyClientLeft + "--BodyClientTop:" + BodyClientTop; //5 5
??????????? R += "\nDivClientWidth:" + DivClientWidth + "--DivClientHeight:" + DivClientHeight; //222 322
??????????? R += "\nDivWidth:" + DivWidth + "--DivHeight:" + DivHeight; //200 300
??????????? R += "\nDivOffsetWidth:" + DivOffsetWidth + "--DivOffsetHeight:" + DivOffsetHeight; //236 336
??????????? R += "\nDivBorderWidth:" + DivBorderWidth //7px
??????????? R += "\nDivMaginWidth:" + DivMaginWidth //3px
??????????? alert(R);
??????? }
??? </script>

</head>
<body>
??? <input type="button" id="btn" value="測試位置" />
??? <br />
??? <div id="div1"line-height: normal; "> ??????? top: 50px; left: 100px; border: 7px solid red; padding: 11px; margin: 3px;" οnmοusedοwn="Position(event)">
??????? 這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容
??????? 這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容
??????? 這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容這是文章內容
??? </div>
</body>
</html>

轉載于:https://www.cnblogs.com/top5/archive/2011/03/06/1972368.html

總結

以上是生活随笔為你收集整理的offsetTop，clientX，clientTop，clientWidth，offsetWidth 坐标，一次弄明白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。