浅析offsetLeft,Left,clientLeft之间的区别


Posted in Javascript onNovember 30, 2013

浅析offsetLeft,Left,clientLeft之间的区别

假设 obj 为某个 HTML 控件

obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。

obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。

我们对前面提到的 offsetParent 作个说明。

offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。

以上属性在 FireFox 中也有效。

另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的)

我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

说明
以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器

scrollTop 是“卷”起来的高度值,示例:

<div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">
<div style="width:50px;height:300px;background-color:#0000FF;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>

由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷,这卷起来的部分就是 scrollTop。

scrollLeft 也是类似道理。

我们已经知道 offsetHeight 是自身元素的宽度,而 scrollHeight 是内部元素的绝对宽度,包含内部元素的隐藏的部分。上述中 p 的 scrollHeight 为 300,而 p 的 offsetHeight 为 100。

scrollWidth 也是类似道理。

IE 和 FireFox 全面支持,而 Netscape 8 和 Opera 7.6 不支持 scrollTop、scrollLeft(document.body.scrollTop、document.body.scrollLeft 除外)。

1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em  

top,pixelTop,posTOp这几个类比就行了.

LEFT:   为从左向右移的位置,即挂件距离屏幕左边缘的距离;

clientLeft   返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离

offsetLeft   返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标

pixelLeft   设置或返回对象相对于窗口左边的位置

scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。

clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。

offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。

IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值

<input type="button" value="点一下" onclick="move()"> 
<div id="d" style="background-color:#ff9966; position:absolute; left:170px; top:100px;width:300;height:300;overflow:scroll" 
onclick="alert('offsetLeft:'+this.offsetLeft)"> 
<div style="height:600;width:600" onclick="alert('offsetLeft:'+this.offsetLeft)"></div> 
</div> 
<script language="javascript"> 
function move() 
{ 
var d=document.getElementById("d") 
a=eval(20) 
d.scrollLeft+=a 
} 
</script>

保存为网页,运行一下,点按钮,滚动条移动
点击div,先弹出b相对于a的位置,再弹出a相对于窗口的位置
Javascript 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
React入门教程之Hello World以及环境搭建详解
Jul 11 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
jQuery之过滤元素操作小结
Nov 30 #Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 #Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 #Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 #Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 #Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 #Javascript
js实现的折叠导航示例
Nov 29 #Javascript
You might like
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php生成html文件方法总结
2014/12/01 PHP
php5与php7的区别点总结
2019/10/11 PHP
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
js中日期的加减法
2015/05/06 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python Canny边缘检测算法的实现
2020/04/24 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
详解python 内存优化
2020/08/17 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
初二物理教学反思
2014/01/29 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
大课间活动实施方案
2014/03/06 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
开业庆典主持词
2014/03/21 职场文书
奖学金感谢信
2015/01/21 职场文书
长江三峡导游词
2015/01/31 职场文书
新教师个人总结
2015/02/06 职场文书
材料采购员岗位职责
2015/04/03 职场文书
山楂树之恋观后感
2015/06/11 职场文书
三十年同学聚会感言
2015/07/30 职场文书
小学安全教育主题班会
2015/08/12 职场文书
《社戏》教学反思
2016/02/22 职场文书
windows安装python超详细图文教程
2021/05/21 Python