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

最新推荐文章于 2020-05-18 15:50:14 发布

约德尔蒙

最新推荐文章于 2020-05-18 15:50:14 发布

阅读量507

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/gyq04551/article/details/53242559

版权

Js 专栏收录该内容

64 篇文章 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>

约德尔蒙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js浏览器区域宽高可视宽高 client家族等

Title//---------------------------client家族---------------------- //clientWidth和clientHeight var box = document.getElementsByTagName("div")[0]; //不包括margin和borde
复制链接

扫一扫