JavaScript在IE与火狐上的7个不同句法

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

尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。在这篇文章中,作者介绍了7个在IE和firefox中不同的JavaScript句法。
 

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

时间: 2024-08-31 20:16:20

JavaScript在IE与火狐上的7个不同句法的相关文章

javascript-如何用Javascript清除绑定在element上的样式?

问题描述 如何用Javascript清除绑定在element上的样式? 一个node节点,应用在他上面的样式,可能有两个来源,一是class属性所对应的css文件中的样式,二是ele.style对象上的属性. 第一个,可以通过修改class属性的方式,来切换样式 第二个,如果想清除ele.style对象上所有样式,如何操作? 解决方案 清除style用cssText属性.样式多弄几个做准备,设置ele.className='需要的样式'做切换,而不是修改class的样式,当然你要修改也行,看这个

虚拟键盘-JavaScript怎样实现咋键盘上按下不同的键,页面上不同的div调用同一个css样式

问题描述 JavaScript怎样实现咋键盘上按下不同的键,页面上不同的div调用同一个css样式 这是页面上的一个虚拟键盘,我想实现的是当我在电脑的键盘上按键后,虚拟键盘上的相对应的键会有不同的显示效果(调用一个css)(虚拟键盘上的每一个小键都是一个图片),就是当我按下不同的按键,页面上相对的键所在的div就会调用同一个css 解决方案 虚拟键盘上的每个控件都增加keycode属性,然后document.onkeydown获取时间的keycode属性后获取控件添加个样式,过100ms再移除什

JavaScript File API实现文件上传预览_javascript技巧

一.概述以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScript 一直是无法访问本地文件的.于是,为了在浏览器中能够实现诸如拖拽并上传本地文件这样的功能,我们就不得不求助于特定浏览器所提供的各种技术了.比如对于 IE,我们需要通过 ActiveX 控件来获取对本地文件的访问能力,而对于 Firefox,同样也要借助插件开发.由于不同浏览器的技术实现不尽相

接手修改一个终端页面登陆,连接服务器,里面的功能火狐上能用,谷歌上不能用,请大神分析指点!

问题描述 接手修改一个终端页面登陆,连接服务器,里面的功能火狐上能用,谷歌上不能用,请大神分析指点! 如下图1一个登陆界面 登陆进去后,如图2界面 在输入主机地址(如192.168.11.14)后点击连接,就会出现如下图 点击切换的话就是变成有绑定字样(对比下图就知道如何改变了),这是在火狐上能正常使用的,但在谷歌上的话就不行了,会出现如下图情况 以下是页面部分代码 解决方案 逻辑代码按浏览器不同进行分支,比如请求中,火狐浏览器Accept-Encoding的值为"gzip, deflate&q

写出更好的JavaScript之undefined篇(上)_javascript技巧

"全局变量"和"全局对象的属性"是指同样的东西,只是因为要配合上下文才用了不同的说法,正文中我就不再另外解释了:"声明"指通过"var"语句声明变量和/或对函数及其签名的定义:"变量"指通过"var"语句声明过或者在函数体中试图访问的命名参数:"undefined"指名为"undefined"的值(全局或本地变量),而"未定义"

基于javascript html5实现多文件上传_javascript技巧

本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得

JavaScript操作表单实例讲解(上)_javascript技巧

一.获得表单引用 1>通过直接定位的方式来获取 document.getElementById(); document.getElementsByName(); document.getElementsByTagName(); 2>通过集合的方式来获取引用 document.forms[下标] document.forms["name"] document.forms.name 3>通过name直接获取"(只适用于表单) document.name 二.获得

javascript中如何实现浏览器上的右键菜单

javascript|菜单|浏览器 如何实现浏览器上的右键菜单 最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果.唯鱼试了试,发现不是很难解决.现在就将源码和原理说出来和大家共享一下.哈,其实效果不是很完美啦,如果哪位大侠有更好的解决方法.可以给唯鱼yyu@enet.com.cn来信罗. 首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单.思路可以有两个,一个是将焦点移开,还有一个就是点在网页的什么地方不会出现右键菜单,而且会响应鼠标

JavaScript让网页自动穿上外套的方法技巧

javascript|技巧|网页 进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢? 进行网页设计时,许多网页都需要相同的边框图案和导航条,FrontPage给我们提供了共享边框方便设计,但是,这样也不太方便,毕竟每个网页都添加了相同的内容,无形中网页增大了,当然,对于动态网页,这不是问题,但是,如果是静态的呢? 怎样可