offsetTop,offsetHeight,scrollHeight,scrollTop的区别
2017-02-23 10:10
316 查看
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
scrollTop 是“卷”起来的高度值,示例:
如果为 p 设置了 scrollTop,这些内容可能不会完全显示。
var p = document.getElementById("p");
p.scrollTop = 10;
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。
scrollHeight 与 offsetHeight
offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值???)。
将依次输出100,250。因为已经指定了元素的height为100px,所以offsetHeight始终为100px;内部元素为 250px,而容器元素只有100px,那么还有150px的内容它无法显示出来,但它却是实际存在的,所以scrollHeight值为 100+150=250。
————————————————————————————————————————————————————————————
clientHeight
四种浏览器对 clientHeight 的解释都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
scrollTop 是“卷”起来的高度值,示例:
如果为 p 设置了 scrollTop,这些内容可能不会完全显示。
var p = document.getElementById("p");
p.scrollTop = 10;
由于为外层元素 p 设置了 scrollTop,所以内层元素会向上卷。
scrollHeight 与 offsetHeight
offsetHeight是自身元素的高度,scrollHeight是 自身元素的高度+隐藏元素的高度(是不是可以理解成内层元素的offsetHeight值???)。
<div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;"> <p style="background-color:red; 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。
————————————————————————————————————————————————————————————
clientHeight
四种浏览器对 clientHeight 的解释都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight
相关文章推荐
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
- scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrol
- 页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- height、clientHeight、scrollHeight、offsetHeight的区别,和获取scrollTop的方法
- 搞懂offsetY、offsetTop、scrollTop、offsetHeight、scrollHeight
- clientHeight、scrollHeight、offsetHeight和scrollTop之间区别
- JavaScript获取浏览器高度和宽度值(documentElement,clientHeight,offsetHeight,scrollHeight,scrollTop,offsetParent,offsetY,innerHeight)
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeigh
- clientHeight、offsetHeight、scrollHeight、scrollTop的区别
- JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
- offsetLeft,offsetTop,offsetHeight,offsetWidth,scrollTop,scrollLeft,scrollHeight,scrollWidth
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- 深刻了解offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollTop,scrollLeft,scrollWidth,scrollHeight,clientHeight,clientWidth
- offsetTop、offsetLeft、offsetWidth、offsetHeight,scrollTop、scrollLeft、scrollWidth、scrollHeight ,clientHeight、offsetHeight
- top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight
- 终于清晰啦!offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop