原生JS的兼容性問題

時間  2019-11-11
標籤 原生 兼容性 問題 欄目 JavaScript 简体版
原文   原文鏈接

1.關於獲取行外樣式 currentStyle 和 getComputedStyle 出現的兼容性問題數組

　封裝一個獲取行外樣式的函數:(兼容全部瀏覽器,包括低版本IE6,7)
        funtion getStyle(obj,name){
            if(obj.currentStyle){
                //IE
                return obj.currentStyle[name];
            }else{
                //Chrom,FF
                return getComputedStyle(obj,false)[name];
            }
        }
    調用：getStyle(oDiv,'width');瀏覽器

2.關於用「索引」獲取字符串每一項出現的兼容性問題:函數

　　對於字符串也有相似於 數組 這樣的經過 下標索引 獲取每一項的值,
    　　var str="abcde";
   　　 aletr(str[1]);
    　可是低版本的瀏覽器IE6,7不兼容
    　兼容方法:str.charAt(i)    //所有瀏覽器都兼容工具

3.關於DOM中 childNodes 獲取子節點出現的兼容性問題this

　　 childNodes:獲取子節點,
　　 --IE6-8:獲取的是元素節點,正常
　　 --高版本瀏覽器:可是會包含文本節點和元素節點(不正常)代理

　　childNodes爲咱們帶來的困擾徹底能夠有children屬性來代替。
       children屬性:只獲取元素節點,不獲取文本節點,兼容全部的瀏覽器，
       比上面的好用因此咱們通常獲取子節點時,最好用children屬性。
       var oUl=document.getElementById('ul');
       oUl.children.style.background="red";orm

4.關於使用 firstChild,lastChild 等，獲取第一個/最後一個元素節點時產生的問題對象

　　 --IE6-8下: firstChild,lastChild,nextSibling,previousSibling,獲取第一個元素節點
        (高版本瀏覽器IE9+,FF,Chrome不兼容,其獲取的空白文本節點)
 　　 --高版本瀏覽器下: firstElementChild,lastElementChild,nextElementSibling,previousElementSibling
     　　 (低版本瀏覽器IE6-8不兼容)
 　　 --兼容寫法: 找到ul的第一個元素節點,並將其背景色變成紅色
   　　 var oUl=document.getElementById('ul');
    　　if(oUl.firstElementChild){
     　　 //高版本瀏覽器
     　　 oUl.firstElementChild.style.background='red';
   　　 }else{
     　　 //IE6-8
   　　   oUl.firstChild.style.background='red';
  　　  }索引

5.關於使用 event對象，出現的兼容性問題事件

 　　var oEvent==ev||event;

6.關於爲一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現的兼容問題

　　多事件綁定封裝成一個兼容函數:
    　　function myAddEvent(obj,ev,fn){
      　　if(obj.attachEvent){
       　　 //IE8如下
        　　obj.attachEvent('on'+ev,fn);
      　　}else{
       　　 //FF,Chrome,IE9-10
       　　 obj.attachEventLister(ev,fn,false);
    　　  }
   　　 }
   　　 myAddEvent(oBtn,'click',function(){
     　　 alert(a);
   　　 });
7.關於獲取滾動條距離而出現的問題

　　兼容處理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

八、鍵盤事件 keyCode 兼容性寫法

　　function getKeyCode(e) {
 　　　　e = e ? e : (window.event ? window.event : "")
 　　　　return e.keyCode ? e.keyCode : e.which
　　}
九、求窗口大小的兼容寫法
　　當咱們獲取滾動條滾動距離時:
　　IE,Chrome: document.body.scrollTop
　　FF: document.documentElement.scrollTop
 
　　// 瀏覽器窗口可視區域大小（不包括工具欄和滾動條等邊線）
　　// 1600 * 525
　　var client_w = document.documentElement.clientWidth || document.body.clientWidth;
　　var client_h = document.documentElement.clientHeight || document.body.clientHeight;
 
　　// 網頁內容實際寬高（包括工具欄和滾動條等邊線）
　　// 1600 * 8
　　var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
　　var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;
 
　　// 網頁內容實際寬高 (不包括工具欄和滾動條等邊線）
　　// 1600 * 8
　　var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
　　var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;
 
　　// 滾動的高度
　　var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
10.DOM 事件處理程序的兼容寫法（能力檢測）
 
　　var eventshiv = {
　　　　  // event兼容
 　　　　 getEvent: function(event) {
   　　　　return event ? event : window.event;
 　　 },
 
 　　 // type兼容
 　　　　 getType: function(event) {
  　　　　  return event.type;
 　　　　 },
 
 　　 // target兼容
　　　　  getTarget: function(event) {
    　　　　return event.target ? event.target : event.srcelem;
 　　　　 },
 
 　　 // 添加事件句柄
 　　　　 addHandler: function(elem, type, listener) {
    　　　　if (elem.addEventListener) {
      　　　　elem.addEventListener(type, listener, false);
   　　　　 } else if (elem.attachEvent) {
      　　　　elem.attachEvent('on' + type, listener);
   　　　　 } else {
     　　　　 // 在這裏因爲.與'on'字符串不能連接，只能用 []
    　　　　  elem['on' + type] = listener;
  　　　　  }
 　　　　 },
 
 　　 // 移除事件句柄
　　　　  removeHandler: function(elem, type, listener) {
 　　　　   if (elem.removeEventListener) {
  　　　　    elem.removeEventListener(type, listener, false);
  　　　　  } else if (elem.detachEvent) {
  　　　　    elem.detachEvent('on' + type, listener);
  　　　　  } else {
   　　　　   elem['on' + type] = null;
   　　　　 }
 　　　　 },
 
 　　 // 添加事件代理
　　　　  addAgent: function (elem, type, agent, listener) {
   　　　　 elem.addEventListener(type, function (e) {
   　　　　   if (e.target.matches(agent)) {
    　　　　    listener.call(e.target, e); // this 指向 e.target
    　　　　  }
 　　　　   });
 　　　　 },
 
 　　 // 取消默認行爲
 　　　　 preventDefault: function(event) {
 　　　　   if (event.preventDefault) {
   　　　　   event.preventDefault();
   　　　　 } else {
  　　　　    event.returnValue = false;
   　　　　 }
 　　　　 },
 
 　　 // 阻止事件冒泡
 　　　　 stopPropagation: function(event) {
   　　　　 if (event.stopPropagation) {
   　　　　   event.stopPropagation();
   　　　　 } else {
    　　　　  event.cancelBubble = true;
  　　　　  }
 　　　　 }
　　　　};
11.解決 IE9 如下瀏覽器不能使用 opacity
　　opacity: 0.5;
　　filter: alpha(opacity = 50);
　　filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

 

12.爲一個元素綁定兩個相同事件：attachEvent/attachEventLister 出現的兼容問題
 
　　事件綁定:(不兼容須要兩個結合作兼容if..else..)
　　IE8如下用: attachEvent('事件名',fn);
　　FF,Chrome,IE9-10用: attachEventLister('事件名',fn,false);?
　　　　function myAddEvent(obj,ev,fn){
 　　　　 if(obj.attachEvent){
  　　　　 //IE8如下
  　　　　 obj.attachEvent('on'+ev,fn);
　　　　  }else{
　　　　   //FF,Chrome,IE9-10
  　　　　 obj.attachEventLister(ev,fn,false);
 　　　　 }
　　　　 }

 

13.獲取元素的非行間樣式值
　　　　function getStyle(object,oCss) {
   　　　　 if (object.currentStyle) {
    　　　　 return object.currentStyle[oCss];//IE
   　　　　 }else{
   　　　　  return getComputedStyle(object,null)[oCss];//除了IE
  　　　　  }
 　　　　 }

 

14.節點加載
 
　　　　//火狐下特有的節點加載事件，就是節點加載完才執行，和onload不一樣
　　　　//感受用到的很少，直接把js代碼放在頁面結構後面同樣能實現。。
　　　　document.addEventListener('DOMContentLoaded',function ( ){},false);//DOM加載完成。好像除IE6-8均可以.
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程