获取元素的尺寸(display显示情况 和display:none两种情况 来获取)
offsetWidth表示元素在页面中所占用的总宽度
offsetHeight表示元素在页面中所占用的总高度
<div style="width:200px;height:50%;">
<div style="width:50%height:50%;;">
<div style="width:50%;height:50%;">
<div style="width:50%;height:50%;">
<div id="div" style="width:50%;height:50%;border:solid 0px;">
</div>
</div>
</div>
</div>
</div><script>
var div=document.getElementById("div");
var w=div.offsetWidth;//标准DOM 13 19 ||IE下13 13 (第一值为border:solid 0px;第二值为默认border边框即3px)
var h=div.offsetHeight;//标准DOM 13 19||IE下 21 21(第一值为border:solid 0px)
console.log("W:"+w+"H:"+h);//13 13,若border没有设置0px,则须加上补白和边框,默认边框3px,DOM标准则 19 19;
//IE标准元素四舍五入12.5--》13 13,同时IE模型每个元素会有一个默认行高,即时元素不包含任何文本,实际高度就显示21px ; 所以 13 21
</script>
解决offsetWidth和offsetHeight属性的缺陷:
当当前元素设置了display:none时或者其父元素的display:none(由于继承关系)返回的offsetWidth和offsetHeight都为0
<div id="div" style="width:200px;height:200px;border-style:solid;display: none;"> </div>
<script type="text/javascript">
var div=document.getElementById("div");
var w=div.offsetWidth;//0
var h=div.offsetHeight;//0
</script>解决缺陷:setCSS()resetCSS() getW()getH()
<div id="div" style="width:200px;height:200px;border-style:solid;display: none;"> </div>
<script type="text/javascript">
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 w=div.offsetWidth;//0
var h=div.offsetHeight;//0
var w1=getW(div);//206
var h1=getH(div);//206
console.log("W1:"+w1+"H1:"+h1);
</script>