一般兼容性问题都体现到DOM和事件上,这里我们,我来为大家讲解一下关于javascript的语法要注意什么?跟着小编一起来看一看吧!

javascript的语法要注意什么(javaScript中一些常见的兼容性问题解决方法)

javascript的语法要注意什么

一般兼容性问题都体现到DOM和事件上,这里我们

只聊ie6 版本浏览器,希望小伙伴们别纠结更低版本浏览器哈。

DOM获取元素

function getByClass(oParent,sClass) { var aResult=[]; var aEle=oParent.getElementsByTagName("*"); var re=new RegExp("\\b" sClass "\\b","i"); for (var i=0;i<aEle.length;i ) { if(re.test(aEle[i].className)) { aResult.push(aEle[i]); } } return aResult; }

属性

javascript // 个人建议加加载完html,使用js给标签赋值 obj.index = 1 // 设置 console.log(obj.index) // 获取 obj.index = '' // 清空

javascript function getDataset(ele){ if(ele.dataset){ return ele.dataset; }else{ var attrs = ele.attributes, dataset = {}, name, matchStr; for(var i = 0;i<attrs.length;i ){ matchStr = attrs[i].name.match(/^data-(. )/); if(matchStr){ name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){ return letter.toUpperCase(); }); dataset[name] = attrs[i].value; } } return dataset; } }

javascript function addClass(obj, class){ if(!this.contains(class)){ obj.className =' ' class; } } function removeClass(obj,class){ if(obj.className.indexOf(class) !== -1){ var reg= new RegExp(class); obj.className = obj.className.replace(reg,''); } }

节点

// 获取子节点 var children = obj.children || obj.childNodes // 获取第一个子节点 var first = obj.firstElementChild || obj.firstChild // 获取最后一个子节点 var last = obj.lastElementChild || obj.lastChild // 获取上一个兄弟节点 var prev = obj.previousElementSibling || obj.nextElementSibling // 获取下一个兄弟节点 var next = obj.nextElementSibling || obj.nextElementSibling

滚动距离

// 有文档头 // - docuemnt.documentElement.scrollTop / scrollLeft // 没有文档头 // - document.body.scrollTop / scrollLeft // 兼容 var top = docuemnt.documentElement.scrollTop || document.body.scrollTop var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

// 包含工具条与滚动条 // - document.documentElement.clientWidth / clientHeight // 不包含工具条与滚动条 // - window.innerWidth / innerHeight // - 使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度

事件

javascript // 事件对象 // ev 不兼容ie 6 7 8 // window.event 兼容所有浏览器 document.onclick = function (ev) { ev = ev || window.event }

javascript var x = ev.clientX document.documentElement.scrollLeft var y = ev.clientY document.documentElement.scrollTop

javascript var code = keyCode || which

javascript var src = target || srcElement

javascript function stopDefault(ev) { if (ev && ev.preventDefault) { ev.preventDefault() } else { event.returnValue = false } return false; }

javascript function stopPropagat(ev){ if (ev&& evstopPropagation) { evstopPropagation() } else { event.cancelBubble = true } }

javascript function on(obj, type, fn){ if(obj.addEventListener){ obj.addEventListener(type, fn, false) }else{ obj.attachEvent('on' type, fn) } }

javascript function on(obj, type, fn){ if(obj.removeEventListener){ obj.removeEventListener(type, fn, false) }else{ obj.detachEvent('on' type, fn) } }

整理不易,如有遗漏还请多多包涵,有疑问的同学可以在文章底部留言哦~

,