1、获取标签节点: document.getElementsByClassName('类名')在低版本 ie中不兼容。解决方法是使用其他方式获取: document.getElementById('id名') document.getElementsByTagName('标签名') document.getElementsByName('name属性值') document.querySelector('css选择器') document.querySelectorAll('css选择器')
2、获取卷去的高度 // 当有文档声明的时候 document.documentElement.scrollTop document.documentElement.srollLeft // 没有文档声明的时候 document.body.scrollTop document.body.scrollLeft * 解决办法使用兼容写法: // 获取 var t = document.documentElement.scrollTop || document.body.scrollTop var l = document.documentElement.srollLeft || document.body.scrollLeft // 设置 document.documentElement.scrollTop = document.body.scrollTop = 数值 document.documentElement.srollLeft = document.body.scrollLeft = 数值
3、获取样式 // W3C标准浏览器 window.getComputedStyle(元素) // 低版本IE中 元素.currentStyle - 使用函数封装的方式兼容: function getStyle(ele,attr){ if(window.getComputedStyle){ return getComputedStyle(ele)[attr] }else{ return ele.currentStyle[attr] } }
4、事件侦听器 // W3C浏览器 ele.addEventListener(事件类型,函数) // 低版本Ie ele.attachEvent('on事件类型',函数) - 使用函数封装的方式解决: function bindEvent(ele,type,handler){ if(ele.addEventListener){ ele.addEventListener(type,handler) }else if(ele.attachEvent){ ele.attachEvent('on'+type,handler) }else{ ele['on'+type] = handler } }
5、事件解绑 // W3C浏览器 ele.removeEventListener(事件类型,函数) // 低版本Ie ele.detachEvent('on事件类型',函数) - 使用函数封装的方式解决: function unBind(ele,type,handler){ if(ele.removeEventListener){ ele.removeEventListener(type,handler) }else if(ele.detachEvent){ ele.detachEvent('on'+type,handler) }else{ ele['on'+type] = null } }
6、事件对象的获取 // W3C浏览器 元素.on事件类型 = function(e){} 元素.addEventListener(事件类型,fn) function fn(e){ } // 在低版本IE中 元素.on事件类型 = function(){ window.event } 元素.addEventListener(事件类型,fn) function fn(){ window.event } - 使用短路运算符解决: 元素.on事件类型 = function(e){ var e = e || window.event } 元素.addEventListener(事件类型,fn) function fn(e){ var e = e || window.event }
7、阻止默认行为 // W3C浏览器 元素.on事件类型 = function(e){ e.preventDefault() } // 在低版本IE中 元素.on事件类型 = function(){ window.event.returnValue = false } - 通过封装函数解决; 元素.on事件类型 = function(e){ var e = e || window.event e.preventDefault?e.preventDefault():e.returnValue=false }
8、阻止事件冒泡 // W3C浏览器 元素.on事件类型 = function(e){ e.stopPropagation() } // 在低版本IE中 元素.on事件类型 = function(){ window.event.cancelBubble = true } - 通过函数封装解决: 元素.on事件类型 = function(e){ var e = e || window.event e.stopPropagation?e.stopPropagation():e.cancelBubble=true }
9、获取精准的目标元素 // W3C浏览器 元素.on事件类型 = function(e){ e.target } // 在低版本IE中 元素.on事件类型 = function(){ window.event.srcElement } - 通过短路运算符解决: 元素.on事件类型 = function(e){ var e = e || window.event var target = e.target || e.srcElement; }
10、获取键盘码 // W3C浏览器 元素.on事件类型 = function(e){ e.keyCode } // 在低版本火狐中 元素.on事件类型 = function(e){ e.which } - 通过短路运算符解决: 元素.on事件类型 = function(e){ var e = e || window.event var keycode = e.keyCode || e.which; }
相关文章
关注千锋学习站小程序
随时随地免费学习课程
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱