原生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
原生js方面的兼容性问题的更多相关文章
- 关于原生js的节点兼容性
关于节点的兼容性: 1:获取元素的子节点 a: childNodes:获取元素的子节点,空文本,非空文本,注释,获取的比较全面, 如果只是想获取元素的子节点,请用(children) b: c ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生js方法document.getElementsByClassName在ie8及其以下的兼容性问题
document.getElementsByClassName在ie8及其以下浏览器的兼容性问题,在ie8及其以下浏览器中不能使用,针对这个问题,下面给出详细的解决方法,感兴趣的朋友可以参考下 ...
- addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法
也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- 【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【前端性能】必须要掌握的原生JS实现JQuery
很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...
随机推荐
- Hashtable语法简介
Hashtable简述 Hashtable是System.Collections命名空间提供的一个容器 Hashtable中keyvalue键值对均为object类型,所以Hashtable可以支持任 ...
- log4net写入DB2备忘 via OLEDB & ODBC
在项目中遇到需要记录操作日志的需求,由于是一个外挂系统,因此不用考虑到公司框架的限制,直接二层架构直连数据库,考虑使用log4net连接DB2.请宽恕我这个非软工科班出身的IT小白,以前一直在知道有个 ...
- web中的HTTP协议
HTTP协议(HyperText Transfer Protocol 超文本传输协议),是浏览器接收web页面和发送web页面请求的标准协议.HTTP协议是基于TCP/IP协议的,版本号有Http1. ...
- poi学习
需要节点 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</a ...
- vue+rest-framework前后端分离整合
一.vue部分 二.django路由配置 (1)项目urls.py修改如下: from django.conf.urls import url, include urlpatterns = [ # p ...
- scss-&父选择器标识符
在使用选择器嵌套的时候有一种情况需要特别注意,先看一段scss代码实例: .text a { color: blue; :hover { color: red } } 也许写此段代码目的是为了将其编译 ...
- axios 发 post 请求,后端接收不到参数的解决方案
问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: ...
- Avro-RPC client in Flume
Avro used in Flume Define the interface of RpcClient public interface RpcClient { public int getBatc ...
- QTableview 只显示横向线
#include <QApplication> #include <QTableWidget> #include <QPainter> #include <Q ...
- 修改mysql编码方式
第一种: 通过mysql命令行修改: 1)首先查看数据库字符编码,命令为: show variables like’collation_%’; show variables like’char ...