2021-03-30

最新推荐文章于 2021-07-14 19:16:59 发布

weixin_45671998

最新推荐文章于 2021-07-14 19:16:59 发布

阅读量57

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45671998/article/details/115317402

版权

元素的偏移量offset

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

 var father = document.getElementById("father");
        var son = document.getElementById("son");
        var bother = document.getElementById("bother");

        //offset偏移
        console.log(son.offsetParent);//如果 son的父元素father 不设置定位，输出值为body；
        //                               //给son的父元素father 设置定位后，输入值为father；
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        //我给father了一个相对定位，用top 使他向下移动了20px，但是这个输出值为30px；
        //我如果用margin属性的话，他的输出值就是20px
        console.log(son.offsetLeft);
        console.log(son.offsetTop);
        //father带着定位时，返回值是，子元素的设置值
        //father不带定位时，返回的是，子元素距离Body的相对值
        console.log(father.offsetHeight);
        console.log(father.offsetWidth);
        //返回自身包括padding，边框，内容区的宽度，返回数值不带单位

offset与style的区别

在这里插入图片描述

模态框

模态框在传统的意义上就是弹出框，当用户点击一个按钮或者一个元素时。页面会弹出一个元素，让用户进行操作。
下面是模态框的案例，和一些坑，需要注意：

 <style>
    #div {
      width: 200px;
      height: 40px;
      margin: 0 auto;
      background: pink;
      font-size: 20px;
      text-align: center;
    }
    #tanchu_background {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      background: rgba(0, 0, 0, 0.3);
    }
    #dl {
      width: 600px;
      height: 200px;
      margin: 0 auto;
      text-align: center;
      background: #ffffff;
      position: fixed;
      top: 120px;
      left: 400px;
      box-shadow: 0px 0px 20px #ddd;
      z-index: 9999;
      display: none;
      border: 1px solid black;
    }
    input {
      width: 190px;
      height: 20px;
      margin: 10px 0;
    }
    #btn1 {
      width: 50px;
      height: 50px;
      border: 0;
      border-radius: 50px;
      position: absolute;
      top: -17px;
      left: 579px;
    }
  </style>
  <body>
    <div id="div">点击我，弹出</div>
    <div id="tanchu_background"></div>
    <div id="dl">
      <p>登录界面</p>
      <input type="text" id="zh" placeholder="请输入账号" />
      <br />
      <input type="password" id="mm" placeholder="请输入密码" />
      <br />
      <button id="btn">立刻登录</button>
      <br />
      <button id="btn1">关闭</button>
    </div>
  </body>
  <script>
    var div = document.getElementById("div");
    var tanchu_background = document.getElementById("tanchu_background");
    var btn1 = document.getElementById("btn1");

    div.addEventListener("click", function () {
      tanchu_background.style.display = "block";
      dl.style.display = "block";
    });
    btn1.addEventListener("click", function () {
      tanchu_background.style.display = "none";
      dl.style.display = "none";
    });
    dl.addEventListener("mousedown", function (e) {
      var x = e.pageX - dl.offsetLeft;
      var y = e.pageY - dl.offsetTop;
      document.addEventListener("mousemove", move);
      function move(e) {
        dl.style.left = e.pageX - x + "px";
        dl.style.top = e.pageY - y + "px";
      }
      document.addEventListener("mouseup", function () {
        document.removeEventListener("mousemove", move);
      });
    });
  </script>

弹出的盒子需要用fixed定位，盒子里面的关闭按钮需要用absolute定位。这样才能保证移动的时候是一体的。

client系列

clientTop：获取边框的高度；
clentLeft：获取边框的宽度；
clientWidth和clientHight是获取盒子的内容大小+padding；
client不包含边框

立即执行函数

不需要调用，立即就能执行的函数叫立即执行函数。
第一种写法：
(function(){})()
第二种写法
(function(){}());

scroll系列

滚动的意思，我们使用scroll系列的相关属性可以动态的获得相关属性的大小和滚动距离等。

内容没有超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth;
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight;

内容超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度

scrollTop / scrollLeft
scrollTop: 超出元素内边距顶部的距离
scrollLeft: 超出元素内边距左边的距离

weixin_45671998

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-30

元素的偏移量offsetoffset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位 var father = document.getElementById("father"); var son = document.getElementById("son"); var bother = document.
复制链接

扫一扫