javascript - What is offsetHeight, clientHeight, scrollHeight? - Stack Overflow
Join the Stack Overflow Community
Stack Overflow is a community of 7.1 million programmers, just like you, helping each other.
J it only takes a minute:
Thought of explaining what is the difference between offsetHeight, clientHeight and scrollHeight or offsetWidth, clientWidth and scrollWidth?
One must know this difference before working on the client side. Otherwise half of their life will be spent in fixing the UI.
, or inline below:
function whatis(propType) {
var mainDiv = document.getElementById("MainDIV");
if (window.sampleDiv == null) {
var div = document.createElement("div");
window.sampleDiv =
div = window.sampleD
var propTypeWidth = propType.toLowerCase() + "Width";
var propTypeHeight = propType + "Height";
var computedStyle = window.getComputedStyle(mainDiv, null);
var borderLeftWidth = computedStyle.getPropertyValue("border-left-width");
var borderTopWidth = computedStyle.getPropertyValue("border-top-width");
div.style.position = "absolute";
div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == "client") ? borderLeftWidth : 0)) + "px";
div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == "client") ? borderTopWidth : 0)) + "px";
div.style.height = mainDiv[propTypeHeight] + "px";
div.style.lineHeight = mainDiv[propTypeHeight] + "px";
div.style.width = mainDiv[propTypeWidth] + "px";
div.style.textAlign = "center";
div.innerHTML = propTypeWidth + " X " + propTypeHeight + "( " +
mainDiv[propTypeWidth] + " x " + mainDiv[propTypeHeight] + " )";
div.style.background = "rgba(0,0,255,0.5)";
document.body.appendChild(div);
document.getElementById("offset").onclick = function() {
whatis('offset');
document.getElementById("client").onclick = function() {
whatis('client');
document.getElementById("scroll").onclick = function() {
whatis('scroll');
#MainDIV {
&button id="offset"&offsetHeight & offsetWidth&/button&
&button id="client"&clientHeight & clientWidth&/button&
&button id="scroll"&scrollHeight & scrollWidth&/button&
&div id="MainDIV" style="margin: height:200 width:400 overflow:"&
&div style="height:400 width:500 overflow:"&
41.1k15159197
1,02811217
To know the difference you have to understand the , but basically:
returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin
is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.
is a measurement of the height of an element's content including content not visible on the screen due to overflow
I will make it easier:
&!-- *content*: child nodes: --&
A child node as text node
&div id="another_child_node"&&/div&
... and I am the 4th child node
&/element&
scrollHeight: ENTIRE
content & padding (visible or not)
Height of all content + paddings, despite of height of the element.
clientHeight: VISIBLE content & padding
Only visible height: content portion limited by explicitly defined height of the element.
offsetHeight: VISIBLE content & padding + border + scrollbar
Height occupied by the element on document.
4,20422051
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
rev .25812
Stack Overflow works best with JavaScript enabledjs的clientHeight,scrollHeight,offsetHeight区别 - 推酷
js的clientHeight,scrollHeight,offsetHeight区别
clientHeight：表示内容显示区域的高度，包含padding
scrollHeight：将内容完全显示需要的高度，
offsetHeight：clientHeight + 上线边距+ 横向滚动条高度
如下测试代码：
&!DOCTYPE html&
&divstyle=&border:5px solid #ff0000;height:100 overflow:& id=&div&&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&&br&
var $div = document.getElementById(&div&);
console.log(&offsetHeight: & + $div.offsetHeight );
console.log( &clientHeight: & + $div.clientHeight);
console.log( &scrollHeight: & + $div.scrollHeight );
测试结果：
offsetHeight: 110
test.html:12 clientHeight: 84
test.html:13 scrollHeight: 1134
Posted in:WEB practise
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致clientHeight offsetHeight scrollHeight clientWidth_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
clientHeight offsetHeight scrollHeight clientWidth
上传于|0|0|文档简介
&&clientHeight offsetHeight scrollHeight clientWidth详解
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
你可能喜欢clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别_CSS教程_网页制作 -
clientWidth clientHeight scrollWidth scrollHeight offsetWidth offsetHieght的区别
作者: 来源: 更新时间: 16:24:12
clientWidth:元素内容区的宽度加上左右padding的值，如果有滚动条，不包括滚动条的宽度clientHieght: 元素内容区的高度加上上下padding的值，如果有滚动条，不包括滚动条的高度clientLeft:元素左边框的宽度，如果没有边框，就是0clientTop:元素上边框的宽度，如果没有边框，就是0&scrollWidth:元素的滚动宽度，不包括元素边框和滚动条宽度，即元素边框和滚动条之间的宽度加上延伸到元素外面的部分scrollHeight:元素的滚动高度，不包括元素的边框盒滚动条宽度，即即元素边框和滚动条之间的高度加上延伸到元素外面的部分scrollLeft:元素水平滚动的距离scrollTop: 元素垂直滚动的距离&offsetWidth:元素从左边框到右边框的宽度offsetHeight: 元素从上边框到下边框的高度offsetLeft:元素到offsetParent的偏移量offsetTop: 元素到offsetParent的偏移量(关于offsetParent offsetLeft offsetTop请参阅《元素的offsetParent offsetLeft offsetTop属性》)另外，FF中的window属性innerWidth innerHeight只的是显示文档的整个视窗的宽度和高度(即浏览器中除了工具栏，菜单栏，地址栏以外的部分)，而outerWidth outerHeight指的是整个浏览器窗口的宽度和高度，即文档视窗高度和宽度 + 工具栏，地址栏，菜单栏这些部分以上的结论是通过下面测试代码得出：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&html& &head& &title&测试三&/title& &script type = &text/javascript& src = &myUtil.js&&&/script& &script type = &text/javascript&& function test() { myUtil.addEvent(&div2&, &scroll&, function() {//绑定滚动事件 display(); }); display(); } function display() { var div1 = myUtil.byId(&div1&);//获取金色背景div框的引用 var str1 = getAll(div1);//获取div1的相关属性字符串 var div2 = myUtil.byId(&div2&);//获取银色背景的引用 var str2 = getAll(div2); //获取div2的相关属性字符串 var div3 = myUtil.byId(&div3&); //获取显示框的引用 div3.innerHTML = &&; div3.innerHTML = &div1:&br /&& + str1 + &div2:&br/&& + str2; //显示 } function getAll(element) { var str = &&; var clientWidth = element.clientW var clientHeight = element.clientH var clientLeft = element.clientL var clientTop = element.clientT var scrollWidth = element.scrollW var scrollHeight = element.scrollH var scrollLeft = element.scrollL var scrollTop = element.scrollT var offsetWidth = element.offsetW var offsetHeight = element.offsetH var offsetLeft = element.offsetL var offsetTop = element.offsetT str += &clientWidth: & + clientWidth + & clientHeight: & + clientHeight + & clientLeft: & + clientLeft + & clientTop: & + clientTop + &&br /&& + &scrollWidth: & + scrollWidth + & scrollHeight: & + scrollHeight + & scrollLeft: & + scrollLeft + & scrollTop: & + scrollTop + &&br /&& + &offsetWidth: & + offsetWidth + & offsetHeight: & + offsetHeight + & offsetLeft: & + offsetLeft + & offsetTop: & + offsetTop + &&br /&& } &/script& &style type = &text/css&& html { margin: 0; border:3 padding: 0; } /*body的边框为橙色*/ body { padding: 20 margin: 20 border: 1 } /*蓝色边框div*/ #wrapper { padding: 20 margin: 0; border: 1 width: 700 } /*红色边框，金色背景div*/ #div1 { border: 3 padding: 20 margin: 20 width: 100 height: 100 background: } /*绿色边框，银色背景div*/ #div2 { background: width: 200 height: 200 overflow: padding: 20 border: 1 margin-bottom: 20 } /*蓝色背景div，是银色div的子框*/ #div2_1 { background: width: 400 height: 400 } /*黑色边框div，用来显示*/ #div3 { border: 1 width: 600 height: 150 } &/style& &/head& &body onload = &test()&& &div id = &wrapper&& &div id = &div1&&&/div& &div id = &div2&&&div id = &div2_1&&&/div&&/div& &div id = &div3&&&/div& &/div& &/body&&/html&测试页面如图:
栏目相关内容
··········
栏目快捷导航
栏目热门浏览
CopyRight & , , All Rights Reserved. 版权所有
网页代码()主要提供网页特效代码、网站设计素材、网页制作教程等资源。包括网页平面设计布局、动态网站开发、字体下载、flash素材、网页模板、背景图标按钮素材、中文英文设计字体下载及在线手册和站长工具查询等资源。js中clientHeight、offsetHeight、scrollHeight、scrollTop的区别
一、clientHeight内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。不包括boder的宽度,如果区域内带有滚动条,还应该减去横向滚动条不可用的高度。
二、offsetHeight（与offsetWidth同理）offsetHeight = 内容可视区域的高度+ 滚动条 +
边框。当前对象的高度与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
三、scrollHeightscrollHeight返回元素的完整的高度，以像素为单位.
当一个元素拥有滚动条时（比如由于 CSS 的 overflow 属性），这些属性和 offsetHeight
不同，offsetHeight只是报告元素的可见部分的大小。这是非标准的但却得到很好支持的属性。
这个属性是非标准的，所以在不同浏览器中可能会存在差异，例如：
在Firefox浏览器中：
scrollHeight就是滚动条可滚动的部分还要加上border的高度还要加上横向滚动条不可用的高度,与clientHeight比起来,多个border的高度跟横向滚动条不可用的高度.
在IE浏览器中：
指这个对象它所包含的对象的高度加上border的高度和margin
四、具体window.screen.availWidth&&&&
返回当前屏幕宽度(空白空间)&&
window.screen.availHeight&&&&
返回当前屏幕高度(空白空间)&&
window.screen.width&&&&
返回当前屏幕宽度(分辨率值)&&
window.screen.height&&&&
返回当前屏幕高度(分辨率值)&&
window.document.body.offsetH&&&&
返回当前网页高度&&
window.document.body.offsetW&&&&
返回当前网页宽度&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}