dom相关

佚名 7年前 (2019-05-05) 随笔 1226人围观抢沙发百度已收录

确定滚动距离
查看视口的尺寸
标准模式or怪异模式
查看元素的几何尺寸
查看元素的尺寸
查看元素的位置
让滚动条滚动
确定滚动距离

function getScrollOffset() {

    if(window.pageXOffset) {
        return {
            x : window.pageXOffset,
            y : window.pageYOffset
        }
    }else{
        return {
            x : document.body.scrollLeft + document.documentElement.scrollLeft,
            y : document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

查看视口的尺寸

window.innerWidth/innerHeight (IE8及IE8以下不兼容)
document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight 适用于==怪异模式==下的浏览器
封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

  function getViewportOffset() {
    if(window.innerWidth) {
      return {
        w : window.innerWidth,
        h : window.innerHeight
      }
    }else{
      if(document.compatMode === "BackCompat") {
        //怪异模式，混杂模式
        return {
          w : document.body.clientWidth,
          h : document.body.clientHeight
        }
      }else{
        //标准模式
        return {
          w : document.documentElement.clientWidth,
          h : document.documentElement.clientHeight
        }
      }
    }
  }

标准模式or怪异模式
<!DOCTYPE html> 这段代码的作用，进入标准模式（简单来说）

怪异模式（浏览器的渲染模式不同）（也叫混杂模式）：试图兼容之前的语法（识别过时的语法）

使用document.compatMode属性代表兼容性，这个属性可以判断是否时标准模式。

查看元素的几何尺寸
domEle.getBoundingClientRect(); （求出的是视觉上的尺寸）
兼容性很好
该方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
height和width属性，老版本IE未实现
返回的结果不是“实时的”


查看元素的尺寸
dom.offsetWidth （求出的是视觉上的尺寸）
dom.offsetHeight


查看元素的位置
dom.offsetLeft dom.offsetTop
对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
dom.offsetParset
返回最近的有定位的父级，如无，则返回body,body.offsetParset返回null。


让滚动条滚动
window上有3个方法：
scroll(), scrollTo(), | scrollBy();
三个方法功能类似，用法都是将x,y坐标传入，即实现让滚动轮滚动到当前位置。
区别：scrollBy()会在之前的数据基础上做累加。
eg.利用scrollBy()快速阅读的功能