javaScript中一些常见的兼容性问题解决方法

javaScript中一些常见的兼容性问题解决方法一般兼容性问题都体现到DOM和事件上,这里我们只聊ie6+版本浏览器,希望小伙伴们别纠结更低版本浏览器哈。DOM获取元素document.

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

DOM

获取元素

  • document.getElementsByclassName 不兼容ie6 7 8
  • 解决方法:
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;
}

欢迎大家来到IT世界,在知识的湖畔探索吧!

  • document.querySelector 不兼容ie6 7
    • 这个选择器获取方法还是很推荐使用的
    • 解决方法:可以使用 getElementById
  • document.querySelectorAll 不兼容ie6 7
    • 这个选择器获取方法还是很推荐使用的,和上面不同的是,它是获取一组元素
    • 解决方法:可以使用 getElementsByTagName 或者 上面封装的getByClass

属性

  • 自定义属性操作方法
    • getAttribute(name) 不兼容ie6 7
    • setAttribute(name,value) 不兼容ie6 7
    • removeAttribute(name) 不兼容ie6 7
    • 解决方法:
欢迎大家来到IT世界,在知识的湖畔探索吧!  javascript
    // 个人建议加加载完html,使用js给标签赋值
    obj.index = 1      // 设置
    console.log(obj.index) // 获取
    obj.index = ''     // 清空
  • 自定义属性data-* 不兼容ie6 7 8 9 10
    • console.log(obj.dataset.name) 获取
    • obj.dataset.name = value 设置
    • 解决方法:
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;
        }
    }
  • 操作class方法
    • classList.add(‘name’) 不兼容ie6 7 8 9
    • classList.remove(‘name’) 不兼容ie6 7 8 9
    • 解决方法:
欢迎大家来到IT世界,在知识的湖畔探索吧!  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,'');
      }
    }

节点

  • 节点类一起总结: 前面的不兼容ie6
// 获取子节点
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
  } 
  • 获取页面中鼠标位置
    • ev.pageX/ev.pageY 不兼容ie6 7 8
    • 解决方案:
javascript
  var x = ev.clientX + document.documentElement.scrollLeft
  var y = ev.clientY + document.documentElement.scrollTop
  • 获取键盘码
    • ev.keyCode 不兼容火狐
    • ev.which 不兼容 ie6 7 8
    • 解决方案
javascript
    var code = keyCode || which
  • 获取事件源
    • ev.target 不兼容 ie6 7 8
    • ev.srcElement 兼容所有浏览器
    • 解决方案:
 javascript
    var src = target || srcElement
  • 阻止默认行为
    • ev.preventDefault() 不兼容ie6 7 8
    • ev.returnValue = false 兼容所有浏览器
    • 解决方案:
 javascript
    function stopDefault(ev) {
        if (ev && ev.preventDefault) {
            ev.preventDefault()
        } else {
            event.returnValue = false
        }
        return false;
    }
  • 阻止事件冒泡
    • e.stopPropagation() 不兼容ie6 7 8
    • ev.cancelBubble = true 兼容所有浏览器
    • 解决方案:
 javascript
    function stopPropagat(ev){
        if (ev&& evstopPropagation) {
            evstopPropagation()
        } else {
            event.cancelBubble = true
        }
    }
  • 事件绑定
    • obj.addEventListener 不兼容9+
    • obj.attachEvent 兼容ie6 7 8
    • 解决方案:
 javascript
    function on(obj, type, fn){
        if(obj.addEventListener){   
            obj.addEventListener(type, fn, false)
        }else{
            obj.attachEvent('on'+type, fn)
        }
    }
  • 事件解除绑定
    • obj.removeEventListener 不兼容9+
    • obj.detachEvent 兼容ie6 7 8
    • 解决方案:
 javascript
    function on(obj, type, fn){
        if(obj.removeEventListener){   
            obj.removeEventListener(type, fn, false)
        }else{
            obj.detachEvent('on'+type, fn)
        }
    }

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

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/48743.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信