offsetTop/offsetHeight scrollTop/scrollHeight 的区别
offsetTop/offsetHeight scrollTop/scrollHeight 这几个属性困扰了我N久,这次一定要搞定。
假设 obj 为某个 HTML 控件。
obj.offsetTop obj距离上方或上层控件的位置,整型,单位像素。
obj.offsetHeight obj自身的高度,整型,单位像素。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
scrollTop 是“卷”起来的高度值,示例:
<div style="width:100px;height:100px;overflow:hidden;" id="p">
<div style="width:50px;height:300px;" id="t">如果为 p 设置了 scrollTop,这些内容可能不会完全显示。</div>
</div>
<script type="text/javascript">
var p = document.getElementById("p");
p.scrollTop = 10;
</script>
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。
scrollHeight 与 offsetHeight
offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值???)。
<div id="container" style=" width:100px; height:100px; overflow:auto;">
<p style=" height:250px; ">
别再做情人 做只猫 做只狗 不做情人 做只宠物至少可爱迷人 和你相交不浅无谓明日会被你憎
</p>
</div>
<script>
alert(document.getElementById("container").offsetHeight);
alert(document.getElementById("container").scrollHeight);
</script>
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为 250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为 100+150=250。
转:http://hi.baidu.com/lampers/item/1605adc13daa00350931c6fc
http://www.cnblogs.com/fullhouse/archive/2012/01/16/2324131.html
alert("网页可见区域宽:" + 'document.body.clientWidth.'+document.body.clientWidth);
alert("网页可见区域高:" + 'document.body.clientHeight.'+document.body.clientHeight);
alert("网页可见区域高 (包括边线的宽):" + 'document.body.offsetWidth.'+document.body.offsetWidth);
alert("网页可见区域高 (包括边线的高):" + 'document.body.offsetHeight.'+document.body.offsetHeight);
alert("网页正文全文宽:" + 'document.body.scrollWidth.'+document.body.scrollWidth);
alert("网页正文全文高:" + 'document.body.scrollHeight.'+document.body.scrollHeight);
alert("网页被卷去的高:" + 'document.body.scrollTop.'+document.body.scrollTop);
alert("网页被卷去的左:" + 'document.body.scrollLeft.'+document.body.scrollLeft);
alert("网页正文部分上:" + "window.screenTop."+window.screenTop);
alert("网页正文部分左:" + "window.screenLeft."+window.screenLeft);
alert("屏幕分辨率的高:" + "window.screen.height."+window.screen.height);
alert("屏幕分辨率的宽:" + "window.screen.width."+window.screen.width);
alert("屏幕可用工作区高度:" + "window.screen.availHeight."+window.screen.availHeight);
alert("屏幕可用工作区宽度:" + "window.screen.availWidth." +window.screen.availWidth);
offsetTop/offsetHeight scrollTop/scrollHeight 的区别的更多相关文章
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...
- JS clientHeight,scrollHeight,offsetHeight,scrollTop,offsetTop概念
JS滚动页面到某一位置时触发指定事件能够增强用户体验或是提高性能,其中使用最多的场景是加载更多,当鼠标滚动至页面下方时,自动加载下一页的内容.另一个常用的场景是当用户滚动至页面某一地方时,页面会给出提 ...
- offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- clientHeight / scrollHeight / offsetHeight 等属性的区别图
网页(内容)可见区域宽:document.body.clientWidth 网页(内容)可见区域高:document.body.clientHeight 即页面浏览器中可以看到内容的这个区域的高度,一 ...
- height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别
1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当 box-sizing: content-box 时,高度应用到元素的内容框. ...
- clientTop、offsetTop和scrollTop的区分
页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...
随机推荐
- 【51nod-1396】还是01串
给定一个0-1串s,长度为n,下标从0开始,求一个位置k,满足0<=k<=n, 并且子串s[0..k - 1]中的0的个数与子串s[k..n - 1]中1的个数相等. 注意: (1) 如果 ...
- 为eclipse EE(汉化版) 配置Tomcat服务器
为eclipse EE(汉化版) 配置Tomcat服务器 很多小朋友在初次使用eclipse进行web开发的时候,很是蒙蔽.以前都是文本编辑器写好,做好目录结构,往tomcat下一扔,重启,搞定. ...
- MySQL Index Condition Pushdown
Index Condition Pushdown (ICP)是MySQL 5.6 版本中的新特性,是一种在存储引擎层使用索引过滤数据的一种优化方式.[Index Condition Pushdown] ...
- QT出现 Cannot create children for a parent that is in a different thread 的解决方法:
timer = new Timer(this);改成 timer = new Timer();就可以了. 因为你timer是属于主线程的,尽量不要在非主线程里创建新的对象并指定其对象为主线程内的对象, ...
- 判断Git是否有新的提交
公司要搭建CI,有这样一个需求:判断Git是否有新的提交,如果有的话拉取代码构建,如果没有不构建,Jenkins的搭建这里就不赘述了,主要讲一下判断这里. Jenkins需要安装插件Condition ...
- 利用 squid 反向代理提高网站性能(转载)
本文在介绍 squid 反向代理的工作原理的基础上,指出反向代理技术在提高网站访问速度,增强网站可用性.安全性方面有很好的用途.作者在具体的实验环境下,利用 DNS 轮询和 Squid 反向代理技术, ...
- 自定义view:view的绘制流程
1.view的绘制流程 当 Activity 接收到焦点的时候,它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始,对布局树进行 measure 和 draw. ...
- [Linux] Boot分区满了的处理方法 The volume "boot" has only 0 bytes disk space remaining
1.查看系统目前正在用的内核 abby@abby:~$ uname -r ..--generic 2.查看/boot保存的所有内核 abby@abby:~$ ls -lah /boot total 3 ...
- iOS-----GitHub上比较齐全的iOS 工具和App
Github-iOS 工具 和 App 系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义控件 功能不错- BFKit 又一套Ca ...
- Git详解之十 Git常用命令
下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一. ...