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

来源：互联网发布：php post 接收编辑：程序博客网时间：2024/05/22 11:46
<!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>
0 0
js浏览器区域 宽高 可视宽高 client家族等

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