其他分享
首页 > 其他分享> > js中offset、scroll、client三大系列

js中offset、scroll、client三大系列

作者：互联网

文章目录

offset系列：元素

获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取

offsetWidth:获取元素的宽
offsetHeight:获取元素的高
offsetLeft:获取元素距离左边位置的值
offsetTop:获取元素距离上面位置的值
在这里插入图片描述

scroll系列：获取元素的样式属性

元素的样式属性是无法直接通过:对象.style.属性 来获取(样式在style属性中设置)

scroll系列:卷曲出去的值
scrollLeft:向左卷曲出去的距离
scrollTop:向上卷曲出去的距离
scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,就是元素自身的宽),没有边框
scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,就是元素自身的高),没有边框

在这里插入图片描述

client系列：可视区域

clientWidth:可视区域的宽(没有边框),边框内部的宽度
clientHeight:可视区域的高(没有边框),边框内部的高度
clientLeft: 左边边框的宽度
clientTop :上面的边框的宽度

在这里插入图片描述

案例：图片跟着鼠标飞

简单版（有bug，一滚动就不行了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
    //鼠标在页面中移动,图片跟着鼠标移动
    document.onmousemove = function (e) {
        //鼠标的移动的横纵坐标
        //可视区域的横坐标
        //可视区域的纵坐标
        my$("im").style.left = e.clientX + "px";
        my$("im").style.top = e.clientY + "px";
    };
</script>
</body>
</html>

终极版：可以在任何的浏览器中实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
  </style>
</head>
<body>
<img src="images/bird.png" alt="" id="im" />
<script src="common.js"></script>
<script>

  //图片跟着鼠标飞,可以在任何的浏览器中实现
  //window.event和事件参数对象e的兼容
  //clientX和clientY单独的使用的兼容代码
  //scrollLeft和scrollTop的兼容代码
  //pageX,pageY和clientX+scrollLeft 和clientY+scrollTop

  //把代码封装在一个函数

  //把代码放在一个对象中
  var evt={
    //window.event和事件参数对象e的兼容
    getEvent:function (evt) {
      return window.event||evt;
    },
    //可视区域的横坐标的兼容代码
    getClientX:function (evt) {
      return this.getEvent(evt).clientX;
    },
    //可视区域的纵坐标的兼容代码
    getClientY:function (evt) {
      return this.getEvent(evt).clientY;
    },
    //页面向左卷曲出去的横坐标
    getScrollLeft:function () {
      return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;
    },
    //页面向上卷曲出去的纵坐标
    getScrollTop:function () {
      return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
    },
    //相对于页面的横坐标(pageX或者是clientX+scrollLeft)
    getPageX:function (evt) {
      return this.getEvent(evt).pageX? this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft();
    },
    //相对于页面的纵坐标(pageY或者是clientY+scrollTop)
    getPageY:function (evt) {
      return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop();
    }

  };
  //最终的代码
  document.onmousemove=function (e) {
    my$("im").style.left=evt.getPageX(e)+"px";
    my$("im").style.top=evt.getPageY(e)+"px";
  };
</script>
</body>
</html>

标签：function,return,元素,js,client,offset,getEvent,边框,evt
来源： https://blog.51cto.com/u_15265965/2894163