css基础---使用offsetWidth和offsetHeight获取元素的尺寸

获取元素的尺寸(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>

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element-resize-detector是一个JavaScript库,用于检测HTML元素的大小变化。它可以用于监测元素的宽度、高度或者任意CSS属性的变化。 使用element-resize-detector的基本步骤如下: 1. 引入库文件:将element-resize-detector的脚本文件引入到你的HTML页面中。你可以从官方网站或者其他资源获取该文件。 ```html <script src="element-resize-detector.js"></script> ``` 2. 创建实例:在你的JavaScript代码中,创建element-resize-detector的实例。 ```javascript const erd = elementResizeDetectorMaker(); ``` 3. 监听元素变化:使用实例的`listenTo`方法来监听你感兴趣的元素的大小变化。 ```javascript const element = document.getElementById('your-element-id'); erd.listenTo(element, function(element) { // 当元素大小发生变化时,会执行这个回调函数 console.log('Element size changed:', element.offsetWidth, element.offsetHeight); }); ``` 在上面的示例中,我们通过`getElementById`方法获取了指定id的元素,然后调用`erd.listenTo`方法来监听该元素的大小变化。当元素的大小发生变化时,会执行传入的回调函数,并且可以在回调函数中处理相应的逻辑。 你还可以根据需要设置其他选项,例如节流延迟时间、检测到大小变化后是否立即触发回调等等。详细的用法和选项可以参考element-resize-detector的文档。 希望这个回答对你有帮助!如果你有更多问题,请继续提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值