day24 其他事件(页面尺寸事件)

目录

    • 页面尺寸事件
    • 元素尺寸于位置
      • 尺寸

页面尺寸事件

  • 会在窗口尺寸改变的时候触发事件
    • resize
  • 检测屏幕宽度
  • 获取宽高
    • 获取元素的可见部分宽高(不包含边框、margin、滚动条等),即:内容+padding+border
    • clientWidthclientHeight

day24 其他事件(页面尺寸事件)_第1张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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
    • offsetWidthoffsetHeight
    • 获取出来的是数值,方便计算
    • 注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0
  • 获取位置:

    • 获取元素距离自己定位父级元素的左、上距离(没有的话以文档左上角为准)
    • offsetLeftoffsetTop只读属性
      day24 其他事件(页面尺寸事件)_第2张图片
<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,当父元素无定位时:day24 其他事件(页面尺寸事件)_第3张图片

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

当父元素有定位时:
day24 其他事件(页面尺寸事件)_第4张图片

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

你可能感兴趣的:(记录前端学习,javascript,前端)