DOM尺寸，DOM元素位置

DOM尺寸


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./utils.js"></script>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            border: 5px solid #333;
            margin: 10px;
            height: 200px;
            background: red;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p>
        <p>box</p> -->
    </div>
    <script>

        // 以一个方向为例，每一种都有宽和高一对
        var box = document.querySelector('.box')
        var width = getStyle(box, 'width')
        console.log(width)

        // offsetWidth 得到的是数字，px帮我们去掉了
        // 包含padding、border,不包含margin
        var width1 = box.offsetWidth // DOM提供的一个属性，用来获取元素占位尺寸，在文档流中所占的大小
        console.log(width1)

        // clientWidth就是在offsetWidth的基础上减去border
        var width2 = box.clientWidth
        console.log(width2)

        // 一般都是纵向滚动条，所以以高度为例
        // 获取的是可滚动内容的总高度，如果box没有滚动条，跟clientHeight是一样的
        // 内容超出的时候获取的总内容高度
        // 不包含边框的
        var height = box.scrollHeight
        console.log(height)

        // 这三对属性都只是用来获取，不能设置
        // box.offsetWidth = 400 // 这一句不会报错，但是也不会生效

        // 如果要修改元素尺寸，还是用样式来修改，带单位的字符串
        box.style.width = '300px'
    </script>
</body>

</html>



DOM元素位置


<!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>
        .box {
            width: 200px;
            padding: 20px;
            border: 5px solid #333;
            margin: 10px;
            height: 200px;
            background: red;
            overflow: auto;
        }

        .container {
            position: relative;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box">
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
            <p>box</p>
        </div>
    </div>
    <script>
        var box = document.querySelector('.box')

        // 获取的是元素加边框前后的偏移量，也就是左边框的宽度
        // clientTop 就是上边框的宽度
        console.log(box.clientLeft)

        // offsetParent指的是最近的有定位属性的祖先级，如果都没有定位，得到body
        // offsetLeft获取的就是相对于offsetParent的坐标
        // 如果box有绝对定位的话，那么offsetLeft就和定位坐标left的值一样
        console.log(box.offsetLeft)

        // console.log(box.scrollTop) // 在这里直接获取永远都是0

        // 当滚轮开始滚动的时候来获取
        box.onscroll = function (){
            console.log(box.scrollTop)
        }

        // 让滚轮默认在元素底部，可以给scrollTop赋值
        // 滚动内容总高度 - 盒子本身高度可以让滚动条在最底部
        box.scrollTop = box.scrollHeight - box.clientHeight // 让滚动条在最底部的公式
    </script>
</body>

</html>
dfc_dfc
发布了60 篇原创文章 · 获赞 3 · 访问量 525
私信关注
DOM尺寸，DOM元素位置

猜你喜欢
