为了账号安全,请及时绑定邮箱和手机立即绑定

来扒一扒原生JavaScript中的兼容问题(上)

大家做前段的最头痛的事情之一,就是解决可恶的浏览器兼容性问题。大多都被搞的焦头烂额的,今天我就来扒一扒兼容性问题以及解决方案,大神不喜勿喷呀~
1. getYear()方法
不知道大家有没有试过下面这个Date对象方法调用年份图片描述

这个方法在在IE中得到的日期是“2016”,在Firefox中看到的日期是“116”,主要是因为在 Firefox 里面 getYear() 返回的是 "当前年份-1900" 的值。
解决办法
用getFullYear( )方法获取年份(这样就浏览器们就能兼容的获取出来正确的年份了)。

2.自定义属性问题
IE8及以下版本,可以通过可以使用获取常规属性的方法来获取HTML中的自定义属性;
标准的浏览器,是不能直接获取自定义属性。
解决方法:统一通过 getAttribute() 获取自定义属性。
3. 用getAttribute()的方法获取元素的class名
getAttribute(“class”); //IE7及以下版本不支持该方法,并且在浏览器中的返回值为null,其他浏览器支持该方法;
getAttribute(“className”); // IE7及以下版本支持该方法,其他浏览器不支持
解决方法:

obj.getAttribute("class") === null?
obj.getAttribute("className") : obj.getAttribute("class");

4. 获取CSS的属性方法
element.style.attr; //只能获取行内样式表里的属性;
element.currentStyle.attr; //IE浏览器支持该方法;
getComputedStyle(element).attr; //IE浏览器不支持,其他浏览器支持。
解决办法:

element.currentStyle  ?  element.currentStyle[attr] :getConputedStyle(element)[attr];

5. 空白文本节点
在标准浏览器下,用childNodes获取子节点,会把换行和空白字符都算作父节点的子节点,而在IE8及以下版本的浏览器childNodes不会。

6. Window.event问题
window.event 能在IE或是在早期版本的谷歌浏览器下运行,而不能在Firefox下运行,这是因为Firefox的event对象只能在事件发生的现场使用,Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。
解决方法:

document.onclick = function (evt) {
   var e = evt ||window.event;
 }

7. 鼠标按键(event对象的button属性)
标准浏览器中:
0——代表按下鼠标左键;
1——代表按下鼠标滚轮;
2——代表按下鼠标右键;
在IE浏览器中:
1——鼠标左键;
2 ——鼠标右键;
3 ——左右同时按下;
4——鼠标滚轮;
5 ——左键加滚轮;
6——右键加滚轮;
7 ——三个同时按下;
图片描述

点击查看更多内容
18人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消