Sunny

# 查看滚动条

查看滚动条的滚动距离 window.pageXOffset/pageYOffset(IE8及IE8以下不兼容) document.body/documentElement.scroll Left/scollTop (兼容性比较混乱,同时取两个值相加,因为不可能存在两个同时有值)

window.pageYOffset  //滚动条滚动y的距离
window.pageXOffset  //横向滚动条X的距离

//IE8及IE8以下的浏览器
document.body.scrollLeft/Top
document.documentElement.scrollLeft/Top
//上面的方法在此浏览器上有值，下面一定为0

//兼容性写法
//document.body.scrollLeft + docuemnt.documentElement.scrollLeft
1
2
3
4
5
6
7
8
9
10

# 封装函数

封装一个兼容性方法,求滚动轮滚动离getScrollOffset()

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

# 查看可视区窗口

查看可视区窗口的尺寸,编写的html文档部分 window.innerWidth/innerHeight

IE8及IE8以下不兼容 document.documentElement.clientWidth/clientHeight 标准模式下，任何浏览器都兼容(声明文档类型)

doument.body.clientWidth/clientHeight 适用于怪异模式下的浏览器(混杂模式)

标准模式:DOCTYPE html-->DTD 怪异模式:删除了文档声明

查看浏览器是否为标准模式或怪异/混杂模式

标准模式doucment.compatMode CSS1compat 怪异模式document.compatMode BackCompat

# 封装函数

封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

function getViewportOffset() {
        if (widow.innerWidth) {
            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
        }
    }
}
        getViewportOffset()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 查看元素的几何尺寸

dom元素.getBoundingClientRect(); 兼容性很好,该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标

height和width属性老版本IE并未实现(可以用right-left和bottom-top) 返回的结果并不是"实时的"(用一个参数接收)修改完方块的位置后再次调用参数的值不变

##查看元素的尺寸 (查看元素的宽高像素,访问的是视觉上的尺寸``包含padding等大小) dom.offsetWidth dom.offsetHeight

# 查看元素的位置

(对于无定位父级的元素，返回相对于文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标,并不是针对于两个都是定位元素的,只要父级有定位,就相对于父级而计算) div.offsetLeft div.offsetTop

dom.offsetParent 返回最近的有定位的父级，如无，返回body, body.offsetParent返回null

# 让滚动条滚动

window上有三个方法 scroll()&&scrollTo(), window.scroll(0,100);让滚动条滚动到相应的xy坐标。

scrollBy(); window.scrollBy(0,10); 跟上面两个方法用途一样,但是此方法会累加坐标,上面两个不会

# 脚本化CSS

# 读写元素css属性

dom.style.prop

读写元素CSS属性

1.可读写***行间的样式***,不是头部的样式,也不是引入的样式,没有兼容性问题,碰到float这样的保留字属性,前面应加css,div.style.cssFloat = "left";

2.复合属性必须拆解,组合单词变成小驼峰式写法 div.style.borderWidth = "100px"; div.style.backgroundColor = "green";

3.属性值必须加字符串

注意

除了dom.style可以写入,再也没有什么能够写入了,其他方法都是读取操作

# 查询计算样式

window.getComputedStyle(div,null) 获取到div元素的所有样式属性,获取到的是元素最终展示的样式属性

window.getComputedStyle(div,null).width获取宽度

第一个参数填元素,第二个参数可以获取伪元素的样式(div,"after").获取到的是一个类数组,肉眼可见的元素样式大小,也可以给后面加.width直接返回页面上的样式大小,返回的计算样式的值都是绝对值,没有相对单位IE8级IE8以下不兼容

IE8及以下 ele.currentStyle(IE独有的属性)

# 封装函数

封装兼容性方法getStyle(elem,prop);

    function getStyle(elem,prop) {
        if(window.getComputedStyle) {
            return window.getComputedStyle(elem,null)[prop];
        }else{
            return elem.currentStyle[prop];
        }
    }
1
2
3
4
5
6
7

技巧

如果说要在页面上添加事件修改元素的样式,可以提前把想改的类样式写好,然后点击后改变元素的类名div.className

← 事件 →