JS中基本的一些兼容问题 可能解释的不会太清楚
做兼容注意:
一如果两个都是属性,用逻辑||做兼容
二如果有一个是方法 用三目运算符做兼容
三多个属性或方法封装函数做兼容
一:谷歌浏览器和火狐浏览器鼠标滚动条兼容
- 1.document.documentElement.scrollTop || document.body.scrollTop
- document.documentElement.scrollLeft || document.body.scrollLeft
二:IE低版本和标准浏览器获取className的兼容
function getgetAttribute(obj){
if(obj.getAttribute("class")==null){
return obj.getAttribute("className");
}else{
return obj.getAttribute("class");
}
}
三 过滤空白文本
三种方式忽略空白文本节点
function noSpace(node){
var arr = [];
//遍历所有的子节点
for(var i = 0; i < node.length; i++){
//判断节点类型是文本且文本中包含空白
if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
continue;
}else{
arr.push(node[i]); //将非空白节点添加到新的数组中
}
}
return arr;
}
- 删除空白文本节点
function removeSpace(node){
for(var i = 0; i < node.length; i++){
//判断节点类型是文本且文本中包含空白
if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
//移除文本节点中的空白
node[i].parentNode.removeChild(node[i]);
}
}
return node;
}
常用 重要//3.移除空白文本节点
function removeSpace(node){ //node :父节点
var childs = node.childNodes; //获取所有子节点
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
四 获取非行内样式兼容
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
三目也可以
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}
五 function(){
var e= evt||window.event;
}
六function getButton(evt){
var e = evt || window.event; //获取事件对象
if(evt){ //通过获取事件对象的方式,判断是否为标准浏览器
return e.button; //直接键值
}else if(window.event){ //通过获取事件对象的方式,判断是否为IE
//键值向标准靠拢(返回标准键值)
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
七 document.onkeypress =function(evt){
Var e=evt || window.event;
Var keyValue = e.keyCode || e.charCode || e.which;
Alert(keyValue);
}
八 阻止事件冒泡兼容
e.stopPropagation ?e.stopPropagation():e.cancelBubble=true;
九 阻止a标签默认链接
e.preventDefault ? e.preventDefault() : e.returnValue = false;
十添加事件监听的兼容
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent("on" + event,fn);
}
}
十一移出事件监听的兼容
function removeEventListener(obj,evt,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,boo);
}else{
obj.detachEvent("on" + evt,fn);
}
}
后续还会有 暂时总结一点 当然兼容写法多样 也可以用三种方式里的其他写
JS中基本的一些兼容问题 可能解释的不会太清楚的更多相关文章
- [js]js中4种无节操的预解释情况
js中4种无节操的预解释情况 - 1. if语句即使条件不成立,条件里的表达式也会进行预解释. - 2. 匿名函数的预解释: 只对等号左边与解释 - 3. 自执行函数的预解释: 不进行预就解释, 执行 ...
- JS中一些常用的兼容写法
1.滚动条到顶端的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;2.滚动条到左端的距离 ...
- cssText在js中写样式表兼容全部
oDiv.style.cssText="width:100px;height:200px;";是前面的升级版(oDiv.style.width='200px';) <styl ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- 分享一个自定义的 console 类,让你不再纠结JS中的调试代码的兼容
问题的产生 在写JS的过程中,为了调试我们常常会写很多 console.log.console.info.console.group.console.warn.console.error代码来查看JS ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- springMVC框架在js中使用window.location.href请求url时IE不兼容问题解决
是使用springMVC框架时,有时候需要在js中使用window.location.href来请求url,比如下面的路径: window.location.href = 'forecast/down ...
- js中css样式兼容各个浏览器写法
在实际业务中往往需要在js中对dom添加一些样式,还需要对各个浏览器厂商的兼顾,看到一位大神写的一个方法很赞,做一个笔记 function prefixStyle(style){ var eleSty ...
- js中startWith、endWith 函数不能在任何浏览器兼容的问题
在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下 在有些浏览器中他是undefined 所以我们可以这样的处理 ...
随机推荐
- spring框架整合hibernate框架简单操作数据库
1.配置文件: <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http:/ ...
- linux(九)之网络基础
一.ping命令 1.1.作用 用于检测主机.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常. 1.2.命令说明 pi ...
- 产品经理和Scrum Master都必须是领域专家吗?
注明:原文来自 Mike Cohn的邮件推送,我已将原文贴在最后供参考,翻译的目的是为了锻炼自己的能力和理解水平,如有版权侵犯,请告之. Scrum Master 和 产品经理应该是领域专家吗?让我们 ...
- HTML <td> 标签的 colspan 属性
HTML <td> 标签的 colspan 属性 实例 表格单元横跨两列的表格: 浏览器支持 所以浏览器都支持 colspan 属性. 没有浏览器支持 colspan="0&qu ...
- MySQL使用聚合函数查询
create table `t_grade` ( `id` int , `stuName` varchar (60), `course` varchar (60), `score` int ); in ...
- Day-1: Python准备知识
python简介 不同于c语言这种贴近硬件的言语,Python是用来编写应用程序的高级编程语言.Python是一款开源软件,所以它有非常完善的代码库,宝库内置的基本库和众多开发者提供的第三方库.这就允 ...
- 一只菜鸟的瞎J8封装系列的目录
因为这是一个系列...也就是我们所说的依赖关系.后面很多方法都是基于我前面封装的工具来进行的,所以我列一个目录供大家参考... 一只菜鸟的瞎J8封装系列 一.手把手封装数据层之DButil数据库连接 ...
- 点击grid单元格弹出新窗口
实现功能:点击指定单元格后会弹出新窗口,并且最后一行合计不会触发单元格触发函数 <script type="text/javascript"> grid.on('cel ...
- POI 自用API
poi包下载 API 使用POI生成Excel,大家都是赞个.可是狐狸觉得毕竟不是微软的产品,使用没有C#语言的好用,方法还是存在极限的. 下面总结狐狸自己用过的方法: import org.apac ...
- ==与equal
@ 对象类型比较:(引用类型) ==和equal都表示对象引用的内存地址是否相同 对象类型继承Object并重写方法equal()用于对象的比较 @ 字符串比较: ==表示String引用的内存地址是 ...