day24 其他事件（页面尺寸事件）

最新推荐文章于 2024-08-09 21:30:00 发布

亦昭昭

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量1.8k

点赞数 41

分类专栏：记录前端学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/z240113765/article/details/135887299

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

页面尺寸事件

会在窗口尺寸改变的时候触发事件
- resize
检测屏幕宽度
获取宽高
- 获取元素的可见部分宽高（不包含边框、margin、滚动条等），即：内容+padding+border
- clientWidth和clientHeight

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: gold;
            padding: 10px;
            border: 10px solid red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector('div')
        console.log(div.clientWidth)
        // resize 浏览器窗口大小发生变化
        window.addEventListener('resize', function () {
            console.log('hhh')
        })
    </script>
</body>

</html>

元素尺寸于位置

使用场景：
- 页面滚动到某个元素就可以做某事
- 简单来说，是通过js的方式，得到元素在页面中的位置

尺寸

获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
- 获取出来的是数值，方便计算
- 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置：
- 获取元素距离自己定位父级元素的左、上距离（没有的话以文档左上角为准）
- offsetLeft和offsetTop是只读属性

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }
    </style>
</head>

<body>
    <div>

    </div>
    <script>
        const div = document.querySelector('div')
        console.log(div.offsetLeft)
    </script>

</body>

加入一个子元素p，当父元素无定位时：在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <script>
        const div = document.querySelector('div')
        const p = document.querySelector('p')
        //最近一级有定位的祖先元素
        console.log(p.offsetLeft)
    </script>

</body>

</html>

当父元素有定位时：
在这里插入图片描述

div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px;
        }