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];  };};

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：20151211小问题

关键词：