浏览器DOM相关属性的求取

浏览器确定滚动距离

 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 }
View Code

 

　　

 

 

查看视口的尺寸

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


　

 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   }
View Code

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　

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

　　

 

posted @ 2019-05-05 23:08  ft039x  阅读(286)  评论(0)  编辑  收藏  举报
TOP