JavaScript BOM-三剑客

程序员文章站 2022-07-06 12:18:20

元素偏移量—offset 系列属性： Document 示例代码offset 和 style 区别:offset可以得到任意样式的样式值获取到的值没有单位只读属性，不能修改offsetWidth offsetHeight 包含padding+border+widthstyle只能获取行内样式值获取的... ......

元素偏移量—offset 系列

属性：

JavaScript BOM-三剑客

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            /*position: relative;*/
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-left: 45px;
        }

        .w {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // 获取元素
        var father = document.queryselector('.father');
        var son = document.queryselector('.son');


        // 1. 可以得到元素偏移量, 150 没有单位
        console.log(father.offsettop);
        console.log(father.offsetleft);

        console.log('-----------------------------------');
        // 2. 如果有定位的父亲，则以父亲为准，没有就以body为准
        console.log(son.offsetleft); // 以body  195
        console.log(son.offsetleft); // 以定位father  45

        console.log('-----------------------------------');
        // 3. offsetwidth 包含padding+border+width 只读属性不能赋值操作
        var w = document.queryselector('.w');
        console.log(w.offsetwidth); // 200 + 10 *2 + 15 * 2 = 250
        console.log(w.offsetheight);  // 200 + 10 *2 + 15 * 2 = 250

        console.log('-----------------------------------');
        // 4. 返回带定位父亲，否则是body
        console.log(son.offsetparent); // 返回带有定位的父亲 否则返回的是body
        console.log(son.parentnode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位


    </script>
</body>

</html>

offset 和 style 区别:

offset

可以得到任意样式的样式值
获取到的值没有单位
只读属性，不能修改
offsetwidth offsetheight 包含padding+border+width

style

只能获取行内样式值
获取的值带单位
width height 不包含padding+border值
可读可写属性

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        var box = document.queryselector('.box');
        box.addeventlistener('mousemove', function (e) {
            //  1. 首先得到鼠标再盒子点击的坐标位置。用pagex pagey
            var x = e.pagex;
            var y = e.pagey;

            // 2. 得到盒子在页面中的位置
            var box_x = this.offsetleft;
            var box_y = this.offsettop;

            // 3. 页面距离 - 盒子距离页面距离 = 鼠标在盒子位置距离
            x = x - box_x;
            y = y - box_y;

            this.innerhtml = 'x坐标' + x + '----y坐标' + y

        })

    </script>
</body>

</html>

<!doctype html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }

        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }

        .login-input-content {
            margin-top: 20px;
        }

        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }

        a {
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
            display: block;
        }

        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closebtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginbtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 获取按钮
        var link = document.queryselector('#link');
        var login = document.queryselector('#login');
        var login_bg = document.queryselector('.login-bg');

        var del = document.queryselector('#closebtn');

        // 2. 点击按钮，让登陆页面显示出来，遮盖层显示出来
        link.addeventlistener('click', function () {
            login.style.display = 'block';
            login_bg.style.display = 'block';
        });

        // 关闭页面，让登陆页面隐藏，遮盖层显示隐藏
        del.addeventlistener('click', function () {
            login.style.display = 'none';
            login_bg.style.display = 'none';
        });


        // 3. 开始拖拽
        // 3.1 找到元素 id= title, 获取元素
        var title = document.queryselector('#title');
        // 3.2 注册事件 鼠标按下事件
        title.addeventlistener('mousedown', function (e) {
            var x = e.pagex - login.offsetleft;  // 得到鼠标在登陆框的位置
            var y = e.pagey - login.offsettop;

            // 3.3 注册鼠标移动事件
            document.addeventlistener('mousemove', move);

            function move(e) {
                // 鼠标在页面坐标，减去 鼠标在盒子的坐标，得到的就是盒子外的坐标
                login.style.left = e.pagex - x + 'px';
                login.style.top = e.pagey - y + 'px';

            }

            // 3.4 移除鼠标事件
            document.onmouseup = function () {
                this.removeeventlistener('mousemove', move)
            }

        })


    </script>
</body>

</html>

元素可视区 client 系列

通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

和我们offsetwidth 最大的区别是不包含边框。

属性：

JavaScript BOM-三剑客

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 1px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // client 宽度 和我们offsetwidth 最大的区别就是 不包含边框
        var div = document.queryselector('div');
        console.log(div.clientwidth); // 202
        console.log(div.clientheight);  // 202
        console.log(div.clientleft); // 10
        console.log(div.clientleft); // 10

    </script>
</body>

</html>

元素滚动 scroll 系列

使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

属性：

JavaScript BOM-三剑客

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            padding: 5px;
            overflow: auto;
        }
    </style>
</head>

<body>
    <div>
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    </div>
    <script>
        // scroll 系列 padding + 自身高度  200 + 5 + 5 + 卷出 94 = 304
        var div = document.queryselector('div');
        console.log(div.scrollheight); // 304
        div.addeventlistener('scroll', function () {
            console.log(div.scrolltop); // 94
        })

    </script>
</body>

</html>

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
            width: 1200px;
            margin: 10px auto;
        }

        .header {
            height: 150px;
            background-color: purple;
        }

        .banner {
            height: 250px;
            background-color: skyblue;
        }

        .main {
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goback">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //1. 获取元素
        var sliderbar = document.queryselector('.slider-bar');
        var banner = document.queryselector('.banner');

        // banner.offesttop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannertop = banner.offsettop; // header 的 150 + margin: 10px = 170
        var sliderbartop = sliderbar.offsettop - bannertop;  // 得到sliderbar 到banner 顶部的距离  sliderbar的top是300, - 170 = 130


        // 2 .获取man主体
        var main = document.queryselector('.main');
        var goback = document.queryselector('.goback');

        var maintop = main.offsettop;

        // 注册页面滚动事件scroll
        document.addeventlistener('scroll', function () {
            if (window.pagexoffset >= bannertop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbartop + 'px';
            }else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = sliderbar.offsettop + 'px'
            }

            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageyoffset >= maintop) {
                goback.style.display = 'block';
            } else {
                goback.style.display = 'none';
            }


        })



    </script>
</body>

</html>

三大系列总结

三大系列对比	作用
e.offsetwidth	包括padding，边框，内容区宽度，不带单位
e.clientwidth	包括padding，内容区高度，不含边框，不带单位
e.scrollwidth	返回自身高度，不含边框，不带单位

主要用法：

offset系列经常用于获得元素位置 offsetleft offsettop
client经常用于获取元素大小 clientwidth clientheight
scroll 经常用于获取滚动距离 scrolltop scrollleft
注意页面滚动的距离通过 window.pagexoffset 获得

JavaScript BOM-三剑客

元素偏移量—offset 系列

元素可视区 client 系列

元素滚动 scroll 系列

三大系列总结

JavaScript实现JSON合并操作示例【递归深度合并】

关于JavaScript中高阶函数的魅力详解

javascript中函数的写法实例代码详解

Javascript中弹窗confirm与prompt的区别

深入浅析javascript函数中with

详解JavaScript中shift()方法的使用

在Javascript中处理数组之toSource()方法的使用

JavaScript中的ES6 Proxy的具体使用

JavaScript中reduce()方法的使用详解

JavaScript中用sort()方法对数组元素进行排序的操作