从零开始学前端：CSSOM视图模式 --- 今天你学习了吗？（JS：Day19）

Coisini_甜柚か

已于 2022-11-22 16:37:35 修改

阅读量325

点赞数

分类专栏：从零开始学前端文章标签：前端 javascript 学习

于 2022-06-15 15:10:05 首次发布

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/124393122

版权

从零开始学前端专栏收录该内容

48 篇文章 10 订阅

订阅专栏

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：查找替换+进度条+随机颜色+随机选择今日任务 — 今天你学习了吗？（JS：Day18）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

前言

最近有点忙，又拉下了。

第十五节课：CSSOM视图模式

CSSOM视图模式(CSS Object Model View)
如何知道页面的宽度与高度（获取页面可视区域的宽度）

一、innerWidth/innerHeight

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <box style="width:2000px;height:2000px;background-color: pink;"></box>
    <!-- 滚动条不属于文档，是属于浏览器的，属于窗口的。 -->
    <script>
        // 获取窗口的内部的宽度与高度（获取页面可视区域的宽度）；

        // 内部浏览器边框的内容（包含滚动条）;
        console.log(window.innerWidth);
        console.log(window.innerHeight);
    </script>
</body>

</html>

效果图：
在这里插入图片描述

二、clientWidth/clientHeight

跟文档相关的，滚动条不属于文档，它属于浏览器的，属于窗口的。

        // 跟文档元素相关，用document。
        document.documentElement.clientWidth / clientHeight //不包含滚动条

        // 获取文档可视区域的宽度与高度
        console.log(document.documentElement.clientWidth);
        console.log(document.documentElement.clientHeight);
        // 没有兼容性的问题，IE8要再宽4个px；

padding + conentWidth/contentHeight（样式宽与样式高+padding）

        // padding + conentWidth / contentHeight（样式宽与样式高 + padding）
        // ele.cliendWidth/clientHeight  包含内部的padding;

        //CSS
        // #box {
        //     width: 200px;
        //     height: 200px;
        //     margin: 20px;
        //     padding: 10px;
        //     border: 5px solid;
        // }

        // html
        // <div id="box"></div>
        
        // JS
        var box = document.getElementById('box');
        console.log(box.clientHeight);  //220

效果图：
在这里插入图片描述

三、offsetWidth/offsetHeight

整个盒子的占位大小 padding + border：

        // padding + border + 样式宽 / 样式高 -> 元素的实际占位
        console.log(box.offsetHeight)
        // 同样没有兼容的问题

四、scrollHeight

获取ele的padding + width / height，但是如果子元素超多氟元素宽度时，会加上超出部分的宽高；

        // 宽高 + padding + 超出的子元素的宽度和高度
        //    html
        < div id="box" ></div >
        alert(box.scrollHeight)
        /*
            但是如果子元素超过父元素宽度时，不受overflow：hidden的影响；
            只管当前对象，不算子元素。
        */

效果图：
在这里插入图片描述

五、offsetTop/offfsetLeft

获取ele元素到定位父级的top和left方向的距离（）

距离父级距离

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            position: absolute;
            top: 500px;
            left: 300px;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        console.log(getComputedStyle(box).top)
        console.log(getComputedStyle(box).left)
        /*
            文档距离定位父级top，与left的值；
        */
        console.log(box.offsetTop)
        console.log(box.offsetLeft)
    </script>
</body>

</html>

效果：
在这里插入图片描述
可以看出前两个输出的是字符串类型，后两个输出的是数字类型。

定位父级值的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #father {
            width: 800px;
            height: 500px;
            border: 5px solid #000;
            margin: 100px auto 0;
        }

        #son {
            width: 500px;
            height: 300px;
            border: 5px solid #00f;
            margin: 100px auto;
        }

        #grandson {
            width: 100px;
            height: 100px;
            background-color: #960;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>
    <script>
        // 定位的值，如果父级及以上的包裹节点没有使用定位，以body作为参考
        console.log(grandson.offsetTop, grandson.offsetLeft)
    </script>
</body>

</html>

效果图：
在这里插入图片描述

将son改为绝对定位，father改为相对定位时：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #father {
            width: 800px;
            height: 500px;
            border: 5px solid #000;
            margin: 100px auto 0;
        }

        #son {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 500px;
            height: 300px;
            border: 5px solid #00f;
            margin: 100px auto;
        }

        #grandson {
            width: 100px;
            height: 100px;
            background-color: #960;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>
    <script>
        // 输出的值为grand距离son的距离
        console.log(grandson.offsetTop, grandson.offsetLeft)
    </script>
</body>

</html>

效果图：
在这里插入图片描述

获取元素到页面的顶部的距离

        console.log(grandson.offsetTop, grandson.offsetLeft)
        function getOffset(ele) {
            var obj = {
                top: 0,
                left: 0

            }
            return obj
        }
        var offset1 = getOffset(grandson.offsetTop)
        console.log(offset1)
    </script>

效果图：
在这里插入图片描述

另一种获取：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #father {
            position: relative;
            width: 800px;
            height: 500px;
            border: 5px solid #000;
            margin: 100px auto 0;
        }

        #son {
            position: absolute;
            top: 100px;
            left: 100px;
            width: 500px;
            height: 300px;
            border: 5px solid #00f;
            /* margin: 100px auto; */
        }

        #grandson {
            width: 100px;
            height: 100px;
            background-color: #960;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="son">
            <div id="grandson"></div>
        </div>
    </div>
    <script>
        // 定位的值，如果父级及以上的包裹节点没有使用定位，以body作为参考
        // 输出的值为距离body的距离
        // console.log(grandson.offsetTop, grandson.offsetLeft)
        function getOffset(ele) {
            var obj = {
                top: 0,
                left: 0

            }

            if (ele !== document.body) {
                obj.top = obj.top + ele.offsetTop
            }


            return obj
        }

        function getStyle(obj) {
            return obj.currentStyle || getComputedStyle(obj)
        }
        // var offset1 = getOffset(grandson.offsetTop)
        // console.log(offset1)
        console.log(getOffset(grandson).top, getOffset(grandson).left)
    </script>
</body>

</html>

效果：
在这里插入图片描述

六、scollTop/ScrollLeft

获取元素的滚动距离，滚动了多少距离，也就打印多少。
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: #f90;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        console.log(document.documentElement.scrollTop);
        // [x轴或y轴的滚动距离]、在赋值时，不能带px单位，否则报错。
        // 可读可写
        document.documentElement.scrollTop = 1000;
        // console.log(document.documentElement.scrollTop);
        console.log(window.scrollTop)   //  undefined;

        // 获取页面的实际高度：[给body标签加宽度与高度]
        document.body.offsetHeight;
        document.body.offsetWidth;
    </script>
</body>

</html>

效果：
在这里插入图片描述

七、鼠标事件clientX/clientY

获取鼠标到文档可视区域的top和left方向的距离；

//没有兼容性的问题
document.onclick = function(e){
  //e为事件源、为鼠标事件对象
	console.log(e)
	console.log(e.clientX)
	console.log(e.clientY)
}

//注意：是文档可视区而不是页面的顶部区域

八、pageX/pageY

/*
	事件对象：记录本次事件对象信息相关的对象；
					在主浏览器里，是时间函数的第一个参数；
					在低版本的IE里，是在window.event属性下；
*/
//不支持破浏览器
document.onclick = function(e){
		console.log(e.pageY)
}
//在低版本里，e是undefined；每一次事件的事件对象不是第一个形参，是window,event;window.event是IE里面的事件对象；
/*
	事件对象：记录本次事件对象信息相关的对象；
					在主流浏览器里，是事件函数的第一个参数；
					在低版本的IE里，是在window.event属性下；
*/

pageX/pageY兼容问题

/*
	兼容问题，
		滚动高+clientY
		滚动宽+clientX
*/
document.onclick = function（e）{
	e = e || window.event; //在低版本的IE里，是在window.event属性下；
	if(!e.pageX){   //判断是否在IE时为undefined
			//兼容做法：被动条遮起的高度+可视区域的宽高坐标；
			console.log(document.documentElement.scrollTop + e.clientY)  //只能在IE使用；
	}else{
			console.log(e.pageY)
	}
}

九、onresize

窗口大小发生改变的时候触发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 可视区域的高
        console.log(document.documentElement.clientHeight)  //如果需要在一开始的时候有大小，需一开始也定义；
        window.onresize = function () {  //窗口大小发生改变的时候触发;
            console.log(document.documentElement.clientHeight)
        }
    </script>
</body>

</html>