BOM之三大系列(offset-scroll-client)

时间 2019-11-17

标签 bom 之三系列 offset scroll client 繁體版

原文原文链接

offset系列

定位父级(偏移父级)

offsetParent(偏移父级):返回与当前元素最近的通过定位(position不等于static)的父级元素,有以下状况:
- 若当前元素的父级元素没有进行CSS定位,offsetParent为body.
- 若当前元素自身有fixed定位,则返回null.(火狐返回body)
- 若是当前元素(自身无fixed定位)的父级元素中有进行CSS定位,offsetParent为离自身元素最近的有CSS定位的父级元素.
- body元素offsetParent返回null

偏移量

offsetWidth:html
- 获取元素的可视宽度,无单位.
- 这个宽度包括元素的边框(border),水平的padding,垂直滚动条宽度,元素自己宽度. (它不包括伪元素的宽度,如::before 或 ::after)
- 若元素被隐藏,则返回0.
offsetHeight:获取元素的可视高度,无单位;(其他上同)浏览器
offsetLeft:获取元素左外边框到定位父级的左内边框的像素距离;bash
offsetTop:获取元素伤外边框到定位父级的上内边框的像素距离;函数
- 没有脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素border+本身的margin;(offsetTop同理)
- 脱离文档流:主要是本身的left(相对于父级)和本身的margin;

scroll系列(卷曲---滚出去)

scrollWidth:元素中内容的实际的宽(没有边框,包含内边距),若是没有内容就是元素的宽
scrollHeight:元素中内容的实际的高(没有边框,包含内边距),若是没有内容就是元素的高
scrollTop:向上卷曲出去的距离
scrollLeft:向左卷曲出去的距离

封装getScroll函数

//获取浏览器向上向左卷曲出去距离的值
    function getScroll(){
            return {
                left : window.pageXOffset || document.documentElement.scrollLeft 
                       || document.body.scrollLeft || 0,
                top :  window.pageYOffset || document.documentElement.scrollTop 
                       || document.body.scrollTop || 0
            };
            
        }
    //测试
    window.onscroll = function(){
        console.log(getScroll().top);  
    };
    }
复制代码

client系列

clientWidth: 可视区域的宽(没有边框),边框内部的宽度
clientHeight: 可视区域的高(没有边框),边框内部的宽度
clientLeft: 左边边框的宽度
clientTop: 上边边框的宽度
clientX(clientY):到顶部左部的可视距离

pageX(pageY):获取向上卷曲与可视距离的和(仅火狐和谷歌支持)测试

盒子跟着鼠标飞实例

谷歌火狐支持e对象 IE8支持window.eventui

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      height: 2000px;
    }
    img{
      position: absolute;
    }
    #box{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    #img{
      position: absolute;
      width: 100px;
      height: 100px;
      border: 1px solid green;
    }
  </style>
</head>
<body>

<div id="box"></div>
<div id="img"></div>
<script src="common.js"></script>
<script>
  //图片跟着鼠标飞,能够中任何的浏览器中实现
  //clientX 和 clientY 单独的使用的兼容代码
  //scrollLeft 和 scroollTop 的兼容代码
  //pageX, pageY 和 clientX + scrollLeft 和 clientY + scrollTop
  
  //把代码封装在对象中
  
  var evt = {
      //window.event 和 事件参数对象e的兼容
      getEvent:function(evt){
          return window.event || e;
      },
      //可视区域的横坐标的兼容代码
      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();
      },
      //相对于页面的纵坐标(pageX 或者 clientY + scrollTop)
      getPageY:function(evt){
          return this.getEvent(evt).pageY ? this.getEvent(evt).pageY : this.getClientY(evt) + this.getScrollTop();
      }
  }
  document.onmousemove=function (e) {
    my$("box").style.left=evt.getPageX(e)+"px";
    my$("box").style.top=evt.getPageY(e)+"px";
  };

</body>
</html>
    
复制代码

------------------------------------------------------记录于 2019.4.16 JavaScript之BOMthis