1

JavaScript BOM-三剑客

元素偏移量—offset 系列

属性:

<!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 最大的区别是不包含边框。

属性:

<!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 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

属性:

<!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  获得


相关资料: https://github.com/1515806183/html-code/tree/master/wapapi-03

posted @ 2020-03-17 10:34  小白森  阅读(90)  评论(0编辑  收藏