标签：function 14 05 兼容 2021 var 节点 document event
原生js方面的兼容性问题
1.关于获取行外样式 currentStyle 和 getComputedStyle 出现的兼容性问题
我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:
我们一般通过这两个方法获取行外样式：
IE下: currentStyle
Chrome,FF下: getComputedStyle(oDiv,false)
兼容两个浏览器的写法:
if(oDiv.currentStyle){
alert(oDiv.currentStyle.width);
}else{
alert(getComputedStyle(oDiv,false).width);
}
*注:在解决很多兼容性写法时,都是用if..else..
封装一个获取行外样式的函数:(兼容所有浏览器,包括低版本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) //全部浏览器都兼容
var str="abcde";
for(var i=0;i<str.length;i++){
alert(str.charAt(i)); //放回字符串中的每一项
}
3.关于DOM中 childNodes 获取子节点出现的兼容性问题
childNodes:获取子节点,
–IE6-8:获取的是元素节点,正常
–高版本浏览器:但是会包含文本节点和元素节点(不正常)
解决方法: 使用nodeType:节点的类型，并作出判断
–nodeType=3–>文本节点
–nodeTyPE=1–>元素节点
例: 获取ul里所有的子节点，让所有的子节点背景色变成红色
获取元素子节点兼容的方法:
var oUl=document.getElementById('ul');
for(var i=0;i<oUl.childNodes.length;i++){
if(oUl.childNodes[i].nodeType==1){
oUl.childNodes[i].style.background='red';
}
}
注：上面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对象，出现的兼容性问题
如: 获取鼠标位置
IE/Chrom: event.clientX;event.clientY
FF/IE9以上/Chrom: 传参ev--> ev.clientX;ev.clientY
获取event对象兼容性写法: var oEvent==ev||event;
document.oncilck=function(ev){
var oEvent==ev||event;
if(oEvent){
alert(oEvent.clientX);
}
}
6.关于为一个元素绑定两个相同事件：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);
}
}
myAddEvent(oBtn,'click',function(){
alert(a);
});
myAddEvent(oBtn,'click',function(){
alert(b);
});
7.关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
8、键盘事件 keyCode 兼容性写法
var inp = document.getElementById('inp')
var result = document.getElementById('result')
function getKeyCode(e) {
e = e ? e : (window.event ? window.event : "")
return e.keyCode ? e.keyCode : e.which
}
inp.onkeypress = function(e) {
result.innerHTML = getKeyCode(e)
}
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都可以.
标签: 兼容问题
标签：function,14,05,兼容,2021,var,节点,document,event 来源： https://blog.csdn.net/qq_45149537/article/details/116781248
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。