当前位置：移动技术网 > IT编程>开发语言>JavaScript > JavaScript BOM-三剑客

JavaScript BOM-三剑客

2020年03月17日 | 移动技术网IT编程 | 我要评论

元素偏移量—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 获得

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js基础练习

js基础练习题乘法表打印1-100中所有的质数定义一个函数，判断一个数字是否是偶数，如果是则返回true，否则返... [阅读全文]
荐 Java使用脚本引擎执行JavaScript代码

JAVA脚本弓|擎是从JDK6.0之后添加的新功能。脚本引擎介绍:使得Java应用程序可以通过一套固定的接口与各... [阅读全文]
javascript设计模式八：职责链模式

职责链的定义：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿... [阅读全文]
首次模拟JS轮播图效果

首次模拟JS轮播图效果大佬手下留情代码有点小问题，就是点击最后一张后跳不到首张，困惑。图的话自己去淘宝扒吧(^~... [阅读全文]
流程控制语句

流程控制语句Js中的程序是从上到下一行行执行的通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选... [阅读全文]
Electron-vue解决跨域

Electron-vue解决跨域博客说明文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有... [阅读全文]
JavaScript中的流程语句详解

流程语句概述其大致内容包括如下：流程控制语句在JS中是至关重要的。JS中的流程控制语句包括if条件判断语句、fo... [阅读全文]
javascript设计模式九：中介者模式

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注... [阅读全文]
前端的 JavaScript Array（数组）方法和对象

什么是数组?数组对象是使用单独的变量名来存储一系列的值。数组可以用一个变量名存储所有的值，并且可以用变量名访问任... [阅读全文]
萝卜青菜各有所爱------console系列详解

前言作为一名前端开发人员，经常会用console.log或者console.info，下边是所有的console... [阅读全文]

网友评论


验证码：