offsetTop，clientX，clientTop，clientWidth，offsetWidth 坐标，一次弄明白
這幾個屬性都是IE火狐完全兼容的，不多說，看我測試結(jié)果便知：
【源碼如下】
<!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)">
??????? 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容
??????? 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容
??????? 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容 這是文章內(nèi)容
??? </div>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/top5/archive/2011/03/06/1972368.html
總結(jié)
以上是生活随笔為你收集整理的offsetTop，clientX，clientTop，clientWidth，offsetWidth 坐标，一次弄明白的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 上海欢乐谷vip门票多少钱一张
- 下一篇： DB2 9 使用拓荒（733 检讨）认证