| 元素的专用属性 | 描述 |
| clientWidth | 获取元素可视部分的宽度，即CSS的width+padding，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 |
| clientHeight | 获取元素可视部分的高度，即CSS的height+padding，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 clientHeight=padding-top+height+border-bottom-width - 滚动条宽度(overflow:auto) clientHeight=padding-top+height+border-bottom-width (overflow:visible隐藏滚动条，则不用减去滚动条的宽度) |
| offsetWidth | 元素在页面中占据的宽度总和，width+padding+border+滚动条的宽度 |
| offsetHeight | 元素在页面中占据的高度总和，width+padding+border+滚动条的高度 offsetHeight=border-top-width+padding-top+height+padding-bottom+border-bottom-width |
| scrollWidth | 当元素设置了overflow：visible样式属性时，元素的总宽度，也有人把它解释为元素的滚动宽度；在默认状态下，如果该属性值大于clientWidth，则元素会自动显示滚动条，以便能够翻阅被隐藏的区域 |
| scrollHeight | 当元素设置了overflow：visible样式属性时，元素的总高度，也有人把它解释为元素的滚动高度；在默认状态下，如果该属性值大于clientHeight，则元素会自动显示滚动条，以便能够翻阅被隐藏的区域 scrollHeight=padding-top+包含内容的全部高度+padding-bottom (IE) scrollHeight=padding-top+包含内容的全部高度 (Firefox) scrollHeight=padding-top+包含内容的全部高度 (Safari) scrollHeight=包含内容的全部高度+底部滚动条宽度（Opera） 隐藏滚动条时： scrollHeight=padding-top+包含内容的全部高度+padding-bottom (IE) scrollHeight=border-top-width+padding-top+height+padding-bottom+border-bottom-width (Firefox) scrollHeight=padding-top+包含内容的全部高度 +padding-bottom (Safari) scrollHeight=padding-top+包含内容的全部高度 +padding-bottom（Opera） |
| scrollLeft | 元素左侧已经滚动的距离（像素值）。即设置或获取位于元素左边界与元素中当前可见内容的最左端之间的距离 |
| scrollTop | 元素顶部已经滚动的距离（像素值）。即设置或获取位于元素顶边界与元素中当前可见内容的最顶端之间的距离 |
<div id="div" style="height:200px;width: 200px;border: solid 50px red;overflow: auto;padding: 50px;">
<div id="info" style="height: 400px;width: 400px;border: solid 1px blue;"></div>
</div>
<script type="text/javascript">
var info=document.getElementById("info");
var m=0,n=1,s="";
while(m++<19){
s+=m+ " ";
}
s+="<br/>";
while(n++<21){
s+=n+"<br/>"
}
info.innerHTML=s;
function getStyle(e,n){//e表示元素，n表示属性名，如“width”、“borderColor”
if(e.style[n]){//若果在style中显示定义
return e.style[n];
}else if(e.currentStyle){//否则，在IE
return e.currentStyle[n]
}else if(document.defaultView&&document.defaultView.getComputedStyle){//非ie(DOM标准)
n=n.replace(/([A-Z])/g,"-$1");//转换参数的属性名 borderColor--> border-Color
n=n.toLocaleLowerCase();//border-Color-->border-color
var s= document.defaultView.getComputedStyle(e,null);
if(s){
return s.getPropertyValue(n)
}
}else{
return null;//如果不支持，返回null
}
}
function fromStyle(e,w,p){//e为元素，w为样式属性值，p为百分号转为小数值
var p = arguments[2];//获取百分比转换后的小数值
if(!p){p=1}
if(/px/.test(w)&&parseInt(w)){
return parseInt(parseInt(w)*p);//如果元素尺寸的值为具体的像素值，则直接转换为数字，并乘以百分比值，并返回该值
}else if(/\%/.test(w)&&parseInt(w)){//若果为%值
var b=parseInt(w)/100;
if((p!=1)&&p){
b*=p;//如果子元素也是百分比，则乘以转换后的小数值
}
e=e.parentNode;//获得父元素的引用指针
if(e.tagName=="BODY"){//如果父元素是body元素，则抛出异常
throw new Error("整个文档结构没有固定尺寸，没发计算了，请使用其他方法获取尺寸")
}
w=getStyle(e,"width");//获取宽度值
return arguments.callee(e,w,b);
}else if(/auto/.test(w)){
var b=1;
if((p!=1)&&p){
b*=p;//如果子元素也是百分比，则乘以转换后的小数值
}
e=e.parentNode;//获得父元素的引用指针
if(e.tagName=="BODY"){//如果父元素是body元素，则抛出异常
throw new Error("整个文档结构没有固定尺寸，没发计算了，请使用其他方法获取尺寸")
}
return arguments.callee(e,w,b);
}else{
throw new Error("元素或其父元素的尺寸定义了特殊单位")
}
}
function setCSS(ele,o){//ele表示要重设样式的元素，o为要设置的值
var a={};
for(var i in o){
a=ele.style[i];
ele.style[i]=o[i];
}
return a;
}
function resetCSS(ele,o){//o表示要恢复的值
for(var i in o){
ele.style[i]=o[i];//恢复原来的样式值
}
}
function getW(ele){
if(getStyle(ele,"display")!="none"){
return ele.offsetWidth||fromStyle(getStyle(ele,"width"));
}
var r=setCSS(ele,{//针对元素隐藏，则调用setCSS()临时显示元素，并存储原始样式的属性值
display:"",
position:"absolute",
visibility:"hidden"
});
var w=ele.offsetWidth||fromStyle(getStyle(ele,"width"));
resetCSS(ele,r);
return w;
}
function getH(ele){
if(getStyle(ele,"display")!="none"){
return ele.offsetWidth||fromStyle(getStyle(ele,"height"));
}
var r=setCSS(ele,{//针对元素隐藏，则调用setCSS()临时显示元素，并存储原始样式的属性值
display:"",
position:"absolute",
visibility:"hidden"
});
var h=ele.offsetWidth||fromStyle(getStyle(ele,"height"));
resetCSS(ele,r);
return h;
}
var div=document.getElementById("div");
var ho=div.offsetHeight;
console.log(ho);//400 400(overflow:visiable overflor:auto)-->chrome
var hs=div.scrollHeight;
console.log(hs);//492 502(overflow:visiable overflor:auto)
//(overflor:auto------>IE 502 Firefox 452 Opera 419 Safari 452
//(overflor:visiable--> IE 502 Firefox 400 Opera 502 Safari 502
var hc=div.clientHeight;
console.log(hc);//300 283(overflow:visiable overflor:auto)
var hg=getH(div);
console.log(hg);//400 400(overflow:visiable overflor:auto)
</script>
可视区域尺寸：scrollLeft和scrollTop可以获取移除可视区域外面的宽度和高度
<textarea id="text" rows="5" cols="25" style="float: right;"></textarea>
<div id="div" style="height: 200px;width: 200px;border: solid 50px red;padding: 50px;overflow: auto;">
<div id="info" style="height:400px;width:400px;border:solid 1px blue;">
</div>
</div>
<script type="text/javascript">
var div=document.getElementById("div");
div.scrollLeft=200;
div.scrollTop=200;
var text=document.getElementById("text");
div.οnscrοll=function(){
text.value= "scrollLeft ="+div.scrollLeft+"\n"+"scrollTop ="+div.scrollTop+"\n"+"scrollWidth ="+div.scrollWidth+"\n"+"scrollHeight ="+div.scrollHeight+"\n"
}
//scrollLeft =169 scrollTop =200 scrollWidth =452 scrollHeight =502
浏览器窗口尺寸：
在DOM获取<html>标签的clientWidth和clientHeight属性，即浏览器窗口的可视宽度和高度---
var w=document.documentElement.clientWidth;//返回值不包含滚动条的宽度
var h=document.documentElement.clientHeight;//返回值不包含滚动条的高度
而IE怪异模式下，body是顶层的可视元素，而html元素是隐藏的，需要通过document.body--
var w=document.body.clientWidth;//IE
var h=document.body.clientHeight//IE
<body style="border: solid 2px blue;margin:0;padding: 0;">
<div style="width: 2000px;height: 1000px;border: solid 1px red;">
</div>
</body>
<script type="text/javascript">//当前可视的浏览器窗口尺寸（值会随之窗口的放大缩小变化）
var w=document.documentElement.clientWidth||document.body.clientWidth;//兼容IE
var h=document.documentElement.clientHeight||document.body.clientHeight;//滚动可视区（实际的浏览器窗口尺寸）
var wb=document.body.scrollWidth;
var hb=document.body.scrollHeight;
console.log("wb:"+wb+"hb:"+hb);//2002 1002
var wh=document.documentElement.scrollWidth;
var hh=document.documentElement.scrollHeight;
console.log("wh:"+wh+"hh:"+hh);//2004 1006
</script>
浏览器解析scrollWidth 浏览器 body.scrollWidth body.scrollHeight document.documentElement.scrollWidth document.documentElement.scrollHeight IE 2002 1002 2004 1006 Firefox 2002 1002 2004 1006 Opera 2004 1006 2004 1006 Chrome 2002 1002 2004 1006 不同浏览器对于使用documentElement对象获取浏览器窗口的实际尺寸是一致的，但是使用Body对象来获取的对应尺寸会存在很大的差异，特别是Firefoxl浏览器，它把scrollWidth和clientWidth属性值视为相等
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
