20151211小问题

1.事件对象的clientX/clientY,screenX/screenY,offsetX/offsetY,pageX/pageY,x/y

事件对象(event):就是发生事件时的元素,鼠标位置,鼠标状态,键盘按键的状态等事件里的细节状态.

打个比方,有个地方出了车祸,此时就有一个包含所有车祸事件状态的对象,它里面有发生车祸的人,发生车祸时车的位置,受伤情况等等.

比如一个点击事件,它的事件对象里,包含有许多的事件细节,状态.例如此时鼠标的位置,键盘的ctrl按键是否按下,shift按键是否按下等,事件名type,事件元素,时间戳timeStamp等一系列事件状态.

clientX/clientY:返回当事件被触发时,鼠标指针的水平/垂直坐标.鼠标相对于windows窗口的坐标.

screenX/screenY:返回当某个事件被触发时,鼠标指针的水平/垂直坐标.相对于电脑左/上屏幕的.

offsetX/offsetY:发生事件的地点在事件源元素的坐标系统中的x/y坐标.(IE属性),不被所有浏览器支持。只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处。

pageX/pageY:这个东西是相对于document的。只是IE678不支持，IE9支持

x/y:事件发生的位置的x/y坐标,它们相对于用CSS动态定位的最内层包容元素.(IE属性),和clientX/clientY相似.

2.getComputedStyle,currentStyle(兼容性处理)

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclaration])只读.

obj.currentStyle[attr]在IE中有用,在FF和Chrome中报错.

“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。

所以获取css属性时,要做一个兼容处理,可以封装一个函数,供其他时候使用.

function getStyle( obj,attr ){
    if( obj.currentStyle ){
        return obj.currentStyle[attr]
    }else{
        return getComputedStyle(obj)[attr];
    };
};

3.getComputedStyle与style的区别

getComputedStyle只可读,不可写;而element.style可读可写.

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象,而element.style只能获取元素style属性中的CSS样式,即只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type=”text/css”>里面的属性.前面获取的对象范围大,后面的获取对象范围小.

4.getPropertyValue与getAttribute

getPropertyValue方法可以获取CSS样式申明对象上的属性值(直接属性名称).

比如我们在一个id为oDiv元素上加了一个float:left;那么我们用window.getComputedStyle(oDiv,null).getPropertyValue(“float”);它获取的就是left.

getPropertyValue()里面的书写形式不支持驼峰写法,如果想知道一个元素的层级,那么getPropertyValue("z-index"),而不能用zIndex代替.

不过在IE低版本里,用getPropertyValue()会报错,这时IE可以用style.getAttribute(),这里属性名需要驼峰写法.