JavaScript offset、client、scroll

offset、client、scroll

3组合大小、位置相关的属性

offset 偏移量

1. 获取坐标(距离offsetParent的横向纵向偏移)

  • offsetLeft属性
  • offsetTop属性

2. 获取大小(包括边框和padding)

  • offsetWidth属性
  • offsetHeight属性

偏移量

  • offsetParent用于获取定位的父级元素,没有定位父元素此时是body
  • offsetParent和parentNode的区别

在这里插入图片描述

client

1. 获取border-left的宽度(边框的宽度)

  • clientLeft属性
  • clientTop属性

2. 获取大小(包括padding,不包括边框,不包括滚动条)

  • clientWidth属性
  • clientHeight属性

在这里插入图片描述

scroll

1. Left / Top(内容滚动出去的距离而不是滚动条top的距离)

  • scrollLeft属性
  • scrollTop属性

2. width / height(内容的大小,包括padding和未显示的内容,不包括滚动条)

  • scrollWidth属性
  • scrollHeight属性

在这里插入图片描述## 案例:拖拽

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="nav">
        <a href="javascript:;" id="register">注册信息</a>
    </div>
    
    <div class="d-box" id="d_box">
        <div class="hd" id="drop">注册信息 (可以拖拽)
            <span id="box_close">【关闭】</span>
        </div>
    <div class="bd"></div>
</div>

<script>
  var box = document.getElementById('d_box');
  var drop = document.getElementById('drop');

  drop.onmousedown = function (e) {
    // 兼容性处理 
    e = e || window.event;
    // 当鼠标按下的时候,求鼠标在盒子中的位置
    // 鼠标在盒子中的位置 = 鼠标在页面上的位置 - 盒子的位置
    var x = getPage(e).pageX - box.offsetLeft;
    var y = getPage(e).pageY - box.offsetTop;

    // 鼠标在文档中移动
    document.onmousemove = function (e) {
      e = e || window.event;
      // 当鼠标在页面上移动的时候。求盒子的坐标
      // 盒子的坐标 = 鼠标当前在页面中的位置 - 鼠标在盒子中的位置
      var boxX = getPage(e).pageX - x;
      var boxY = getPage(e).pageY - y;

      box.style.left = boxX + 'px';
      box.style.top = boxY + 'px';
    }
  }

  // 当鼠标弹起的时候,移除鼠标移动事件
  document.onmouseup = function () {
    document.onmousemove = null;
  }

  // 点击关闭按钮,隐藏盒子
  var box_close = document.getElementById('box_close');
  box_close.onclick = function () {
    box.style.display = 'none';
  }

  // 处理pageX和pageY的兼容
  function getPage (e) {
        var pageX = e.pageX || e.clientX +scroll().left;
        var pageY = e.pageY || e.clientY + scroll().top;
       return {
                pageX:pageX,
                pageY:pageY
            }
        }
 // 处理scrollTop和scrollLeft的兼容
   function scroll(){
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var left = document.body.scrollLeft || document.documentElement.scrollLeft;

        return {
            top:top,
            left:left
        }
    }
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值