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的可以控制左右滚动及自动滚动效果的代码
Jul 25 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
javaScript中的空值和假值
Dec 18 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
Vue filter介绍及详细使用
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中读写文件实现代码
2011/10/20 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
JavaScript 基础问答三
2008/12/03 Javascript
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
出纳员岗位责任制
2014/02/11 职场文书
护理见习报告范文
2014/11/03 职场文书
护士求职自荐信
2015/03/25 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript