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:设置或获取位于对象左边界和窗口中目前可见内容的最 ...
最新文章
- Web Service (二) CXF自动发布Web Service（No Spring）
- Spring Cloud Alibaba - 09 Ribbon 饥饿加载及其他配置参数解读
- css class选择器用法,CSS类选择器用法简明介绍
- PHP probuf详细步骤_初识protobuf和php的相关用法
- 从生物学的角度浅谈前端工程化
- Cygwin中如何像在Ubuntu中一样安装软件
- android 语音编码,android – 如何将录制的语音编码为ogg vorbis？
- java解析xml 字符串_Java解析XML字符串
- grafana的前端技术_Grafana开发环境搭建
- NC气象文件转TIF影像小工具开发（PyQt5 开发）
- 威金蠕虫(网吧杀手)肆虐互联网 九千用户十余企业遭攻击
- eclipse html清理缓存,eclipse中的缓存怎么清理
- Acwing算法—动态规划
- 改变窗口最大化的尺寸
- 计算机无法显示移动硬盘,电脑不显示移动硬盘怎么办 检测不到移动硬盘的原因...
- Linux常用60个命令用法
- sql取每组最新数据
- android之ListView布局
- mpirun mpd mpiexec
- c语言证明加法交换律,与环定义相关的问题证明交换环定义为：集合R上定义加法和乘法,使得R中任何元素满足：（1）加法交换律 （2）加法结合律（3...