window.getComputedStyle()方法
//兼容的写法:获得 指定元素的指定样式的值
//定义函数 获得内部样式表对象
function getStyle(ele) {
return getComputedStyle ? getComputedStyle(ele) : ele.currentStyle;
}
上面代码调用的时候举例:
getStyle(元素节点).bottom
getStyle(元素节点).top
另一种:
function getStyle(ele,cssName) {
if (window.getComputedStyle){
return window.getComputedStyle(ele)[cssName]
}
return ele.currentStyle[cssName];
}
DOM2级兼容性写法:
ele:添加事件的元素节点对象
elentName:事件名称
callback:事件处理函数
eventStream:事件流(页面中事件被相应的顺序,包括:
【事件冒泡fasle:从当前元素向父节点扩散】,
【事件捕获true:从根节点开始,逐渐向当前元素扩展】)
添加事件
function addEvent(ele,eventName,callback,eventStream) {
if (ele.addEventListener){//正常版本
ele.addEventListener(eventName,callback,eventName)
}else {//IE低版本
ele.attachEvent('on'+eventName,callback);
}
}
删除事件
function removeEvent(ele,eventName,callback,eventStream) {
if (ele.addEventListener){//正常版本
ele.removeEventListener(eventName,callback,eventName)
}else {//IE低版本
ele.detachEvent('on'+eventName,callback);
}
}
事件对象的获取兼容写法
1.事件对象:js内置对象,当事件被触发时底层产生的一个针对该事件的一个对象,记录了当前事件的相关信息。
例如:鼠标点击事件对象中,包含了事件的类型和鼠标点击的位置信息等
2.捕获事件对象:
① 主流浏览器,谷歌火狐等,事件对象是以实参的方式传递
②IE8以下,需要用window.event
事件对象的获取兼容写法如下:
元素.onclick=function (e) {
e=e||window.event;
console.log(e)
}
事件常用方法:preventDefault()
作用:取消默认行为,如取消右侧右击菜单、用来页面跳转的超链接。
格式:事件对象.preventDefault();
注意:该方法在IE低版本8 及其以前的版本不支持。
可以使用 事件对象.returnValue = false; 替代。
兼容写法:
e.preventDefault ? e.preventDefault():(e.returnValue=false);
事件对象方法:stopPropagation ()
作用:用来阻断冒泡的实现
IE8及以下不支持,需要写cancelBubble = true;来实现冒泡阻断
e.stopPropagation ? e.stopPropagation():e.cancelBubble = true;