获取DOM元素尺寸-CSDN博客

获取大小

<div id="div" style="border:solid;"></div>
       <script type="text/javascript">
           var div=document.getElementsByTagName("div")[0];
//       alert(div.style.width);//空字符串
   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
       }
   }
   var w=getStyle(div,"width");
   alert(w);//屏幕可视宽度1350px；若在style设置了width，则显示具体设置的值
       </script>
       <div id="div1" style="width:200px;"></div>
       <script>
           var div1=document.getElementsByTagName("div")[1];
           var w1=getStyle(div1,"width");
   alert(w1);//200px
       </script>
   </body>

获取大小（百分比值时）

<body>
       <div style="width:200px;">
           <div style="width:50%;">
               <div style="width:50%;">
               <div style="width:50%;">
               <div id="div" style="border:solid 0px;">

               </div>
           </div>
           </div>
           </div>
       </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("元素或其父元素的尺寸定义了特殊单位")
       }

   }

   var div=document.getElementById("div");
   var w=getStyle(div,"width");
   w=fromStyle(div,w);
   alert(w);//25,因为style里有border（默认为3px ,设置为0px返回25px），不设定义了border则变成了19

       </script>
   </body>

css基础--控制大小