js浏览器区域宽高可视宽高 client家族等

以你之姓@ 2022-07-13 23:28 143阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
    //---------------------------client家族----------------------
                //clientWidth和clientHeight
                var box = document.getElementsByTagName("div")[0];
                //不包括margin和border
                //padding+width
                console.log(box.clientWidth);
                //clientTop获取的是上border
                console.log(box.clientTop);
    
                //offsetHeight:   元素高，height+border+padding
                //offsetWidth:    元素宽，width+border+padding
                //offsetTop:      上边距离带有定位的父盒子的距离（重要）
                //offsetLeft:	左边距离带有定位的父盒子的距离（重要）
                //offsetParent:	最近的带有定位的父盒子
                //
                //
                //scrollHeight:   内容高，不含border
                //scrollWidth:    内容宽，不含border
                //scrollTop:  	document.documentELement.scrollTop || document.body.scrollTop; （重要）window.pageXOffset;
                //浏览器页面被卷去的头部
                //元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。
                //子盒子被遮挡住的头部
                //scrollLeft: 	document.documentELement.scrollLeft:  || document.body.scrollLeft: ; （重要）window.pageYOffset;
                //浏览器页面被卷去的左侧
                //元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。
                //子盒子被遮挡住的左侧
                //
                //
                //clientHeight:   元素高，height+padding;
                //window.innerHeight;	document.body.clientHeight     可视区域的高
                //clientWidth:    元素宽，width+padding;
                //window.innerWidth;	document.documentElementWidth; 可视区域的宽
                //clientTop:   	元素的上border宽
                //clientLeft:    	元素的左border宽
                //clientY		调用者：event.clientY(event)（重要）
                //作用：鼠标距离浏览器可视区域的距离，上
                //clientX		调用者：event.clientX(event)（重要）
                //作用：鼠标距离浏览器可视区域的距离，左
    
    
    
    //-----------------------三大家族的区别--------------------------
                //    width和height
                //    offset带border
                //    scroll不带border，内容的宽高
                //    client不带border
    
    
                //    top和left
                //    offset距离父系盒子带有定位的盒子之间的距离
                //    scroll被卷去的部分的距离
                //    clientborder的宽高
    
    
                //clientX和clientY
                //    event调用，鼠标距离浏览器的可视区域的距离
    
    
    
    
    
    
    //--------------------------浏览器的可视区域的宽高----------------------
    
                  console.log(document.body.clientWidth); //可视区域的宽
                  console.log(document.body.clientHeight);//可是区域的高
    
                  console.log(document.documentElement.clientWidth);
                  console.log(document.documentElement.clientHeight);
    
    
                  document.write(window.innerWidth+"<br>");
                  document.write(window.innerHeight);
    
                //新事件：浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
                window.onresize = function () {
                    document.title = client().width + "    "+ client().height;
                }
    
    
                //获取屏幕可视区域的宽高
                function client(){
                    if(window.innerHeight !== undefined){
                        return {
                            "width": window.innerWidth,
                            "height": window.innerHeight
                        }
                    }else if(document.compatMode === "CSS1Compat"){
                        return {
                            "width": document.documentElement.clientWidth,
                            "height": document.documentElement.clientHeight
                        }
                    }else{
                        return {
                            "width": document.body.clientWidth,
                            "height": document.body.clientHeight
                        }
                    }
                }
    
    
    
    //------------------------------检测屏幕的宽度-----------------------
                    window.onresize = function () {
                        document.title = window.screen.width + "    "+ window.screen.height;
                    }
    
    </script>
    </body>
    </html>