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 坐标，一次弄明白相关推荐
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight
1.假设 obj 为某个 HTML 控件 obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素. obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型, ...
- 一张图搞懂clientWidth,offsetWidth,scrollHeight
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
- JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
- [转]html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
- offsetTop、offsetLeft、offsetWidth、offsetHeight、style中的样式
< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd> 假设 obj 为某个 H ...
- 转 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位 ...
- 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth
from:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html HTML源码DOM的offsetLeft,Left,clientLef ...
- 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth【转】
有时候项目中会用到用js获取元素位置来定位元素,我在网上开了大量的 图解,代码,最终把我搞的晕了,还是结合网上的 自己来总结一下,首先来看看网上的: DOM的定义如下图 获取元素的位置属性可以通过 ...
- 16/8/23-jQuery完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径，滚动图片...
引用地址:http://www.cnblogs.com/mguo/archive/2013/03/19/2969657.html scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最 ...
最新文章
- jsp用session判断输入框_[实战小剧场servletamp;jsp] 用户登录及退出功能实现
- Android ViewPager多页面滑动切换以及动画效果---换view
- UIView的layoutSubviews和drawRect方法何时调用
- 定时任务四种实现方式
- [Django青铜修炼手册] 初识Django
- ShopXO本地化部署安装之centeros 安装Apache2.4.6 + PHP7.0.33 + Mysql5.7.25环境
- mysql索引 物理文件_MySQL体系结构之物理文件
- RS232, RS422, RS485 引脚布局区别
- leetcode刷题：z字形变换
- 【干货】大学本科生零基础如何开始做发明类竞赛项目
- Java全栈工程实践
- LPC2132驱动240X128的液晶
- 统信操作系统 摄像头驱动程序
- How to Become a Straight-A student
- 《长安十二时辰》，作为程序员，看完我震惊了！涉及通信、云计算、大数据等！...
- 头条号如何做原创，老家底都翻出来了，又要被人骂了
- 一元二次方程abc决定什么_二次函数中的a，b，c各决定什么？
- 计算机公式求时间差公式,24时间差计算公式 excel中计算24小时
- javaSE简单介绍
- python 例子 银行_Python3实现简单的银行账户登录系统实例