浏览器DOM相关属性的求取

- 日理万妓 2021-12-23 22:57 224阅读 0赞

## 浏览器确定滚动距离 ##

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 function getScrollOffset() {
     2 
     3     if(window.pageXOffset) {
     4         return {
     5             x : window.pageXOffset,
     6             y : window.pageYOffset
     7         }
     8     }else{
     9         return {
    10             x : document.body.scrollLeft + document.documentElement.scrollLeft,
    11             y : document.body.scrollTop + document.documentElement.scrollTop
    12         }
    13     }
    14 }

![627518-20190604101446804-1231263136.png][]

查看视口的尺寸

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

![627518-20190604102309454-132765091.png][]

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 function getViewportOffset() {
     2     if(window.innerWidth) {
     3       return {
     4         w : window.innerWidth,
     5         h : window.innerHeight
     6       }
     7     }else{
     8       if(document.compatMode === "BackCompat") {
     9         //怪异模式，混杂模式
    10         return {
    11           w : document.body.clientWidth,
    12           h : document.body.clientHeight
    13         }
    14       }else{
    15         //标准模式
    16         return {
    17           w : document.documentElement.clientWidth,
    18           h : document.documentElement.clientHeight
    19         }
    20       }
    21     }
    22   }

标准模式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()快速阅读的功能

转载于:https://www.cnblogs.com/ft039x/p/10817021.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211223/17461fbf714748d199d2179adb2fe36b.png
[627518-20190604101446804-1231263136.png]: /images/20211223/f40aed9d68684cb392664bc05ec4d688.png
[627518-20190604102309454-132765091.png]: /images/20211223/1757fd0546e8420093d411040002d671.png