- 浏览: 488758 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (241)
- Jscript笔记 (23)
- sql (8)
- jQuery (23)
- css (2)
- jQuery.form (2)
- struts2 (3)
- 数据库字符集 (3)
- Java (15)
- Oracle (2)
- DB2 (4)
- ResourceBundle (1)
- Exception (7)
- Windows (2)
- 数据库 (18)
- JSP (2)
- jstree (3)
- datatable (9)
- bootstrap-switch (1)
- select2 (3)
- Java.tree (1)
- JSF2 (1)
- Bootstrap (1)
- Eclipse (13)
- SVN (3)
- Eclipse插件 (5)
- myeclipse (1)
- ajax (1)
- JBOSS (2)
- data storage (1)
- Apache tiles (1)
- springMVC (15)
- mybatis (6)
- AngularJS (13)
- checkbox (1)
- J2EE (1)
- SecureCRT (7)
- tomcat (4)
- Maven (3)
- log4j (3)
- Xshell (1)
- 工具应用 (5)
- spring (12)
- Apache (5)
- books (1)
- fastjson (1)
- Standard (1)
- Mysql (1)
- MAC (1)
- Charles (1)
- LINUX (1)
- 日常开发ISSUE (0)
最新评论
-
yuchangcheng:
直接把代码 上传上来吧 这样看的很吃力呀
mybatis generator 的复合查询 -
zzd0058:
我表示报400错误
SpringMVC接收复杂集合参数 -
lihaiming:
影非弦 写道没有这个页面详细的文件么?文档地址:https:/ ...
select2.js使用 -
影非弦:
没有这个页面详细的文件么?
select2.js使用 -
影非弦:
这个select.min.css是select2提供的样式文件 ...
select2.js使用
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: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 除外)。
发表评论
-
js浮点运算bug的解决办法
2015-12-01 18:27 1117一、事件 最 ... -
a href=#与 a href=javascript:void(0) 的区别
2015-10-30 14:00 1173a href="#"> 点 ... -
JS字符串替换函数全部替换方法
2015-10-30 11:54 911JS字符串替换函数:Replac ... -
解决URL参数中的%问题(org.apache.tomcat.util.http.Parameters processParameters Paramete)
2015-10-30 11:16 1748测试最近的代码发现,有一个servlet处理通过post方式 ... -
javascript用户密码加密,js密码加密
2015-10-28 20:31 2344今天总结几种javascript用户密码加密的方法,虽然前端 ... -
JavaScript 操作 Cookie
2015-10-27 15:25 700从事web开发也有些日子了,cookie ... -
setTimeout()和setInterval()方法的区别?
2015-10-13 18:07 814因为setTimeout(表达式,延时时间)在执行时,是在载 ... -
JS验证大全
2015-05-06 14:07 851关键字:js验证表单大全,用JS控制表单提交 ,javasc ... -
js 中获得session中的值
2015-03-18 14:20 2455js中,通过el表达式获得request中的值。但是不能在j ... -
javascript
2015-02-09 14:19 1598原文 http://blog.csdn.net/yourt ... -
JS Object类通用的属性与方法
2015-01-28 18:32 933<script type="text/ja ... -
javascript/jquery判断是否为undefined或是null!
2015-01-21 12:55 6419转自 http://blog.csdn.net/dxn ... -
js,jquery数组
2015-01-14 17:08 7281.数组的创建 var arr=new ... -
javascript数组元素的添加、删除与插入以及参数数组的使用
2015-01-14 17:01 11391、数组元素的添加 push方法在数组的尾部添 ... -
js中数组相关操作
2015-01-14 17:06 750var arr = [];//声明数组 或者 arr = ... -
JAVASCRIPT获取当前页面的URL信息
2015-01-09 17:50 947以前在做网站的时候,经常会遇到当前页的分类高亮显示,以便让用户 ... -
jQuery锚点跳转及相关操作(转)
2015-01-08 18:03 1007本文来源于:http://ygsilence.iteye. ... -
JS定位到元素所在位置
2015-01-08 17:59 5257前两天开发一个功能,显示所有记录之后,对某一条记录操作之后 ... -
js中 NaN、 null 及 undefined 的区别
2015-01-05 12:00 985NaN:保留字(表明数 ... -
js数组与字符串的相互转化
2014-12-31 16:46 1159数组与字符串的相互转化 <script type=& ...
相关推荐
主要是对offsetLeft,Left,clientLeft之间的区别进行了详细的分析介绍,需要的朋友可以过来参考下想,希望对大家有所帮助
主要介绍了div的offsetLeft与style.left区别的相关资料,需要的朋友可以参考下
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是...
这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便。 2. style.left是读写的,offsetLeft是只读的,...
JavaScript中style.left与offsetLeft的用法及区分详解_.docx
HTMLElement.offsetLeft 是一个只读属性,返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析,需要的朋友可以参考下。
如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是...
定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 ...
offsetleft.rar
本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一下参考。
offsetleft属性具有一定的兼容性问题,在IE7浏览器中,它的返回值是相对于最近的父类元素的左侧的距离,本文通过代码示例给大家介绍offsetleft兼容性问题,小伙伴们一起看看吧
clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.
ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,各...
一、问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的... var left = div.offsetLeft + 5; div.style.left = left + px; if (left < 200
主要介绍了offsetLeft实现图片滚动效果实例代码,有需要的朋友可以参考一下