js中client、offset、scroll之间的关系
2016-05-03 17:20
274 查看
js中clientHeight和offsetHieght之间的关系
clientHeight
大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。 offsetHeight
在IE6,IE7,IE8以及最新的的FF, Chrome中,在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。 scrollHeight --------------------指的是对象已被绚烂出来了之后(成为元素)他的值才有可能和clientHeight不一样,若还是对象状态的话, scrollHeight=clientHeight。只有scrollHeight的值大于clientHeight时,scrollTop才有用,同时在设置scrollTop时
他内在的scrollBottom值不可能为负数,这就保证了元素和容器不会脱离分开。同理scrollLeft、scrollRight、scrollBottom
也一样的。
scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关,是内容的实际高度。 计算方式 :scrollHeight = topPadding + bottomPadding + 内容margix box的高度。 在浏览器中的区别在于: IE6、IE7 认为scrollHeight 是网页内容实际高度,可以小于clientHeight。 FF、Chrome 认为scrollHeight 是网页内容高度,不过最小值是clientHeight。 注: 以上都是对于一般元素而方言的,body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中,如果你想获取整个视窗的高度,你得用documentElement.clientHeight,因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性,则完全是另外一回事:js中的scroll和offset 使用比较的实例与分析
1.offsetTop : 当前对象到其上级层(父类)顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.2.offsetLeft : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.3.offsetWidth : 当前对象的宽度. 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值5.offsetParent : 当前对象的上级层对象. 注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.6.scrollLeft : 对象的最左边到对象在当前窗口显示的范围内的左边的距离. 即是在出现了横向滚动条的情况下,滚动条拉动的距离.7.scrollTop 对象的最顶部到对象在当前窗口显示的范围内的顶边的距离. 即是在出现了纵向滚动条的情况下,滚动条拉动的距离.
相关文章推荐
- JavaScript 定时器制作一个弹窗小广告
- JS学习笔记
- JS错误处理
- javascript实现下雪效果【实例代码】
- json数据返回
- 2.JS中的数据类型与变量
- javascript 手机号码正则表达式验证函数
- 1.JavaScript如何使用
- Web前段初步——javascript(1)
- 判断是否为自然数
- javascript的列表切换【实现代码】
- 01.javascript中字符串常用操作总结、JS字符串操作大全
- JSON对象长度和遍历方法
- 简化 javaScript 代码技巧
- 判断是否为数字
- HTML/JSP实现跳转到页面指定位置
- JS刷新页面方法
- AJax的使用json数据的传输回调函数
- JSP页面中取得绝对路径
- JavaScript中split与join函数的进阶使用技巧