IE与Firefox在JavaScript上的7个不同句法分享


Posted in Javascript onOctober 30, 2011

在这篇文章中,作者介绍了7个在IE和Firefox中不同的JavaScript句法。

IE与Firefox在JavaScript上的7个不同句法分享
1. 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";

2. 元素的推算样式
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;

3. 访问元素的"class"
像"float"一样,"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");

This syntax would also apply using the setAttribute method.

4. 访问<label>标签中的"for"
就第3点中所提到的,我们同样需要使用不现的句法区分来访问<label>标签中的"for":

在IE中这样写:

var myObject = document.getElementById("myLabel"); 
var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中这样写:
var = document.getElementById("myLabel"); 
var myAttribute = myObject.getAttribute("for");

5. 获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在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;

6. 获取可见区域、窗口的大小
有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。

在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;

7. 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";
Javascript 相关文章推荐
js滚动条回到顶部的代码
Dec 06 Javascript
7个JS基础知识总结
Mar 05 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
javascript 用函数实现继承详解
May 28 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
加载 Javascript 最佳实践
Oct 30 #Javascript
js判断是否为数组的函数: isArray()
Oct 30 #Javascript
JS trim去空格的最佳实践
Oct 30 #Javascript
js中更短的 Array 类型转换
Oct 30 #Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 #Javascript
关于图片按比例自适应缩放的js代码
Oct 30 #Javascript
js 弹出菜单/窗口效果
Oct 30 #Javascript
You might like
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
js中call与apply的用法小结
2013/12/28 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python 含参构造函数实例详解
2017/05/25 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
餐饮总经理岗位职责
2014/03/07 职场文书
公司收款委托书范本
2014/09/20 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
java版 简单三子棋游戏
2022/05/04 Java/Android