css基础--复杂环境下的元素尺寸(可视区域、浏览器窗口尺寸等)

与元素尺寸相关的属性
元素的专用属性                                                                           描述
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.scrollWidthbody.scrollHeightdocument.documentElement.scrollWidthdocument.documentElement.scrollHeight
IE2002100220041006
Firefox2002100220041006
Opera2004100620041006
Chrome2002100220041006
     

不同浏览器对于使用documentElement对象获取浏览器窗口的实际尺寸是一致的,但是使用Body对象来获取的对应尺寸会存在很大的差异,特别是Firefoxl浏览器,它把scrollWidth和clientWidth属性值视为相等

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值