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="https://www.cnblogs.com/py-web/p/javascript:;">點擊，彈出登錄框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登錄會員
            <span><a id="closeBtn" href="https://www.cnblogs.com/py-web/p/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="https://www.cnblogs.com/py-web/p/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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141460.html

標籤：JavaScript

上一篇：移動除錯和終端檢測

下一篇：用白話講解JS中的繼承核心