IE、FF、Chrome浏览器中的JS差异介绍


Posted in Javascript onAugust 13, 2013

因为浏览器公司各自为利益考虑,到目前为止各浏览器的HTML标准或是JS标准都还未统一。在平常的开发中,我们常使用的JS框架基本已经帮我们处理好了JS在各浏览器中的差异,但作为一个开发人员,还是有需要了解JS在浏览器中的差异。

FF、Chrome:没有window.event对象
FF、Chrome:没有window.event对象,只有event对象,IE里只支持window.event,而其他主流浏览器两者都支持,所以一般写成:function handle(e){e = e || event;}

获取HTML元素
IE:支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)

自定义属性问题
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用 getAttribute() 获取自定义属性。

Ajax请求
IE: new ActiveXObject()
FF、Chrome:new XMLHttpRequest()

获取HTML元素
IE:支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)

innerText的使用
FF不支持innerText,它支持textContent来实现innerText,不过textContent没有像innerText一样考虑元素的display方式,所以不完全与IE兼容。如果不用textContent,字符串里面不包含HTML代码也可以用innerHTML代替。
if(document.all){
document.getElementById('element').innerText = "mytext";
} else{
document.getElementById('element').textContent = "mytext";
}

获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的,也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时,必须指出的是结果相对于Firefox,IE会有更在的不同,这种方法本身就是有BUG的。
在IE中这样写:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中这样写:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

获取可见区域、窗口的大小
有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。
在IE中这样写:
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写:
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

Alpha 透明
这并不是一个JavaScript句法问题,而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现,这是通过访问CSS的Alpha透明设置来完成的,通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下::
在IE中这样写:
#myElement { filter: alpha(opacity=50); }
在Firefox中这样写:
#myElement { opacity: 0.5; }
在IE中这样写:
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
在Firefox中这样写:
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

CSS "float" 值
访问一个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,例如,访问某个ID为"header"的<div>的 background-color值,我们使用如下句法:
document.getElementById("header").style.backgroundColor= "#ccc";
但由于"float"这个词是一个JavaScript保留字,因此我们不能用object.style.float来访问,这里,我们可以在两种浏览器中这么做:
在IE中这样写:
document.getElementById("header").style.styleFloat = "left";
在Firefox中这样写:
document.getElementById("header").style.cssFloat = "left";

元素的推算样式
JavaScript可以使用object.style.property句法,方便地在外部访问和修改某个CSS样式,但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式,我们可以使用下面的代码:
在IE中这样写:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

访问元素的"class"
"class"是JavaScript的一个保留字,在这两个浏览器中我们使用如下句法来访问"class"。
在IE中这样写:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
在Firefox中这样写:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

Javascript 相关文章推荐
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
mpvue性能优化实战技巧(小结)
Apr 17 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 Javascript
JavaScript的Module模式编程深入分析
Aug 13 #Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 #Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 #Javascript
js setTimeout 参数传递使用介绍
Aug 13 #Javascript
js setTimeout 常见问题小结
Aug 13 #Javascript
删除select中所有option选项jquery代码
Aug 12 #Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 #Javascript
You might like
php 7新特性之类型申明详解
2017/06/06 PHP
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js控制input输入字符解析
2013/12/27 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
jquery.map()方法的使用详解
2015/07/09 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
JavaScript模拟push
2016/03/06 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
nodejs 生成和导出 word的实例代码
2018/07/31 NodeJs
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
浅谈Python peewee 使用经验
2017/10/20 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
自荐信格式范文
2013/10/07 职场文书
银行类自荐信
2014/02/04 职场文书
高中学生期末评语
2014/04/25 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Mysql基础之常见函数
2021/04/22 MySQL
新手入门Mysql--sql执行过程
2021/06/20 MySQL
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS