Js查漏补缺-13

最新推荐文章于 2020-10-14 09:02:30 发布

才不是小弱鸡

最新推荐文章于 2020-10-14 09:02:30 发布

阅读量129

点赞数

分类专栏： javascript web

本文链接：https://blog.csdn.net/qq_40996739/article/details/106942324

版权

web 同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

javascript

25 篇文章 0 订阅

订阅专栏

0x00 元素偏移量offset系列

利用offset相关属性可以得到元素的偏移量和大小

  <div class="father">
    <div class="son">

    </div>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    console.log(son.offsetParent); // 返回元素计算偏移量的父元素
    console.log(father.offsetTop); // 返回元素相对父元素（带有定位）上方的偏移
    console.log(son.offsetLeft); // 返回元素相对父元素（带有定位）左方的偏移
    console.log(son.offsetWidth); // 返回元素的宽度，包括padding和边框
    console.log(son.offsetHeight); // 返回元素的高度，包括padding和边框
    // 注意父元素要带定位，若无定位，则父元素为body
  </script>

offset与style的区别

①offset可以得到任何样式表中的样式值，而style只能得到行内样式的样式值

②offset获得的样式值是不带单位的，而style获得的样式值是带单位的；

③offsetWidth获得的样式值包括border和padding，而style获得的样式值不包含；

④offset获取的属性是只读属性，不能修改，而style获得的属性可以修改

示例：获取鼠标点击在元素中的坐标

  <div class="father">
    <div class="son">

    </div>
  </div>
  <script>
    let father = document.querySelector('.father');
    let son = document.querySelector('.son');
    father.addEventListener('click',(e) =>{
      let x = e.pageX - father.offsetLeft;
      let y = e.pageY - father.offsetTop;
      console.log(x);
      console.log(y);
    });
  </script>

0x01 模态框的拖拽

HTML+js

<body>

  <!-- Add your site or application content here -->
  <div class="login">
    <div class="login-start">
      <a href="javascript:;" class="btn-start">点击打开登录框</a>
    </div>
    <div class="login-content">
      <div class="login-title">会员登录
        <span><a class="login-close">╳</a></span>
      </div>
      <div class="login-div">
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名" name="info[username]" class="login-input">
      </div>
      <div class="login-div">
        <label>密码</label>
        <input type="password" placeholder="请输入密码" name="info[password]" class="login-input">
      </div>
      <div class="login-btn">
        <a href="javascript:;" class="btn-submit">登录</a>
      </div>
    </div>
    <div class="login-bg"></div>
  </div>
  <script src="js/vendor/modernizr-3.11.2.min.js"></script>
  <script src="js/plugins.js"></script>
  <script src="js/main.js"></script>

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
  <script>
    let startBtn = document.querySelector('.login-start');
    let loginBg = document.querySelector('.login-bg');
    let closeBtn = document.querySelector('.login-title>span');
    let loginContent = document.querySelector('.login-content');
    let loginTop = document.querySelector('.login-title');
    let x;
    let y;
    startBtn.addEventListener('click',() => {
      startBtn.style.display = 'none';
      loginBg.style.display = 'block';
      loginContent.style.display = 'block';
    })
    closeBtn.addEventListener('click',() => {
      startBtn.style.display = 'block';
      loginBg.style.display = 'none';
      loginContent.style.display = 'none';
    })
    loginTop.addEventListener('mousedown',(e)=>{
      x = e.pageX - loginContent.offsetLeft;
      y = e.pageY - loginContent.offsetTop;
      document.addEventListener('mousemove',move);
      function move (e){
        loginContent.style.left = e.pageX - x + 'px';
        loginContent.style.top = e.pageY - y + 'px';
      }
      document.addEventListener('mouseup',(e)=>{
        document.removeEventListener('mousemove',move);
      })
    })
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

css

.login-start {
  margin:0 auto;
  width:250px;
  height:50px;
  font-size:30px;
}
.login-start > a {
  text-decoration: none;
  color:black;
}
.login-content {
  width:512px;
  height:280px;
  position:fixed;
  border:#ebebeb solid 1px;
  left:50%;
  top:50%;
  box-shadow:0px 0px 20px #dddddd;
  z-index:9999;
  transform: translate(-50%,-50%);
  background-color:white;
  display: none;
}
.login-title {
  width:100%;
  height:40px;
  position:relative;
  line-height: 40px;
  text-align: center;
  cursor: move;
  font-size:17px;
}
.login-title > span {
  width:30px;
  height:30px;
  margin:0;
  padding:0;
  border-radius: 50%;
  background-color: #F8F8FF;
  box-shadow:0px 0px 10px #dddddd ;
  font-size: 12px;
  position:absolute;
  right:0px;
  top:0px;
  line-height: 30px;
  cursor:pointer;
}
.login-close {
  text-align: center;
}
.login-div {
  width:500px;
  height:35px;
  line-height:35px;
  margin-top:20px;
  margin-left:40px;
  text-indent:5px;
}
.login-div > input {
  width:350px;
  height:35px;
  float:right;
  margin-right:80px;
  padding-left:10px;
  border:#cccccc solid 1px;
}
.login-btn {
  width:100%;
  height:40px;
  text-align: center;
  margin-top:40px;
}
.login-btn > a {
  width:250px;
  height:35px;
  border:#ebebeb solid 1px;
  display: inline-block;
  line-height: 35px;
  text-decoration: none;
  color:black;
}
.login-bg {
  display: none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.3);
}

0x02 元素可视区client

    console.log(box.clientTop);   //  返回元素上边框的大小
    console.log(box.clientLeft);  //  返回元素左边框的大小
    console.log(box.clientHeight);//  返回元素的高度，不包括border，但是包括padding，不带单位
    console.log(box.clientWidth); //  返回元素的宽度，不包括border，但是包括padding，不带单位