原生JS的兼容性问题

妖狐艹你老母 2021-12-12 00:23 309阅读 0赞

**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 获取子节点出现的兼容性问题**

childNodes:获取子节点,  
　　 --IE6-8:获取的是元素节点,正常  
　　 --高版本浏览器:但是会包含文本节点和元素节点(不正常)

childNodes为我们带来的困扰完全可以有children属性来代替。  
       children属性:只获取元素节点,不获取文本节点,兼容所有的浏览器，  
       比上面的好用所以我们一般获取子节点时,最好用children属性。  
       var oUl=document.getElementById('ul');  
       oUl.children.style.background="red";

**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

**8、键盘事件 keyCode 兼容性写法**

function getKeyCode(e) \{

e = e ? e : (window.event ? window.event : "")

return e.keyCode ? e.keyCode : e.which

**9、求窗口大小的兼容写法**

当我们获取滚动条滚动距离时:

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都可以.

转载于:https://www.cnblogs.com/yaoyao-/p/10893796.html

原生JS的兼容性问题

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 js中原生ajax及其兼容性写法

相关 JS中浏览器兼容性问题

相关使用原生JS实现一款兼容性强大的滚动条

相关浏览器的兼容性问题

相关 JS兼容性处理

相关原生JS的兼容性问题

相关关于原生js的节点兼容性

相关原生js兼容性问题

相关 js 浏览器兼容性问题

相关浏览器的兼容性问题