- 浏览: 95604 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
kakamimika:
貌似不行吧
jquery读取xml文件示例 -
momofiona:
第二版本:http://dl.dropbox.com/u/ ...
popBaseball拖动插件分析
尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。
这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的 7 个方面。
1. CSS “float” 属性
获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法:
document.getElementById("header").style.borderBottom= "1px solid #ccc";
但是由于 “float” 是 JavaScript 的保留词,我们就无法使用 object.style.float 来获取 “float” 属性了。一下是我们在两种浏览器中的使用的方法:
IE 语法:
document.getElementById("header").style.styleFloat = "left";
Firefox 语法:
document.getElementById("header").style.cssFloat = "left";
2. 元素的计算样式
通过使用上述的 object.style.property, JavaScript 可以很容易的获取和修改对象的设定 CSS 样式。但是这一语法的局限在于,它只能取得内联在 HTML 里的样式,或者直接使用 JavaScript 设定的样式。style 对象不能获取使用外部样式表设定的样式。为了获取对象的”计算样式”,我们使用以下代码:
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”属性的情况,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
IE 语法:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("className");
Firefox 语法:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("class");
4. 获取 label 标签的 “for” 属性
和 3 一样,使用 JavaScript获取 label 的 “for” 属性也有不同语法。
IE 语法:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("htmlFor");
Firefox 语法:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("for");
对于 setAtrribute 方法来说也是同样的语法。
5. 获取光标位置
获取元素的光标位置比较少见,如果需要这么做,IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的,一般用作许多复杂事件处理的一部分,这里仅用来描述差异。需要注意的是,IE 中的结果和 Firefox 中是不同的,因此这个方法有些问题。通常,这个差异可以通过获取 “滚动位置” 来补偿 - 但那是另外一篇文章的课题了。
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 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时,这就需要通过获取 CSS 的 alpha 设定来实现,一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码:
IE 语法:
#myElement { filter: alpha(opacity=50); }
Firefox 语法:
#myElement { opacity: 0.5; }
要使用 JavaScript 获取这些值,需要使用 style 对象:
IE 语法:
var myObject = document.getElementById("myElement"); myObject.style.filter = "alpha(opacity=80)";
Firefox 语法:
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
当然,已经说到了,一般是在循环中间来改变 opcity/alpha,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。
原文:http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie
译文:http://www.qianduan.net/7-javascript-difference-between-ie-and-firefox
发表评论
-
js继承研究
2010-03-05 00:21 762<!DOCTYPE html PUBLIC &quo ... -
autoclick: 鼠标在链接上停留2秒后自动打开该链接 (uc.js脚本)
2009-08-25 11:11 2007var AutoClick = { Timeou ... -
脚本化HTTP
2009-08-24 11:42 11381.html,xml及json的响应 text/xml--- ... -
数组元素的操作
2009-08-21 11:46 930还有一种常用的 var a ... -
控制 Flash Player 的 JavaScript 方法一览表【收集纠正】
2009-08-14 11:04 2986控制 Flash Player 的 JavaScr ... -
location.hash实现跨域iframe自适应
2009-08-05 14:11 1267页面域关系: 主页面a.html所属域A:www.taoba ... -
jquery读取xml文件示例
2009-06-24 22:50 6654<?xml version="1.0&qu ... -
在jQuery中利用AJAX加载XML数据并解析
2009-06-24 16:42 11431,Content-Type很多时候无法解析就是Content ... -
ajax学习的好地方
2009-06-24 12:06 849http://www.ajaxa.cn/ http://ww ... -
ADS公用库
2009-05-26 12:20 1232/** * ADS Library from Advanc ... -
ajax loading 图标在线制作及收藏
2009-04-22 11:57 1302ajax loading 图标在线制作及收藏 h ... -
一个比较新鲜的判断浏览器的方法
2009-03-25 00:50 828long long ago,在子鼠的博客上看见过一段用Ja ... -
一些图片在js应用的资料
2009-03-24 23:17 681//预装载一个图片; ... -
创建元素节点和文本节点的基础语法
2009-03-16 23:31 846<script type="text/ja ... -
自己整理的一套javascript小型公用库
2009-03-16 13:43 968/** * @author zjq common ... -
IE DOM的一致性
2009-03-11 19:49 880if(n.nodeType)==1 //NodeType ... -
第8章:检测浏览器和操作系统
2009-03-10 22:12 16821navigator对象 8.2浏览器的检测方式 1.对象/ ... -
javascript高级编程第9章笔记(事件)
2009-03-04 21:29 1190[size=large][/size]定位 //for ie ...
相关推荐
详细讲解IE和Firefox中css和javascript的差异和兼容!
Javascript在IE和FireFox中的不同表现,总结IE和火狐的差异。
该文档是本人亲自测试的CSS和JS在IE和火狐上的差异的总结,给出了一些详细的处理办法。
汇总了js在IE与Firefox环境下的差异,以及出现问题如何解决的方法,非常的详尽,也很实用,有需要的小伙伴自己拿走
js在火狐和IE浏览器的差异.zip js在火狐和IE浏览器的差异.zip js在火狐和IE浏览器的差异.zip js在火狐和IE浏览器的差异.zip
总结一部分IE和Firefox的javascript差异写法,对于像书写多浏览器兼容性更好的代码,可以参考下。
火狐与IE浏览器之间的一些差别收集 一、IE与FireFox的js和css 二、IE6/IE7和Firefox对Div处理的差异 三、CSS完美兼容IE6/IE7/FF的通用方法
js在火狐和浏览器中的差异 1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在 MF 下运行 (2)解决方法: 改用 document.formName.elements[...
主要为大家详细介绍了IE和Firefox之间在JavaScript语法上的差异,在JavaScript语法上不同的7个方面,感兴趣的小伙伴们可以参考一下
尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。
为此,主要从以下几方面差异总结IE和Firefox的Javascript兼容性: 一、函数和方法差异; 二、样式访问和设置; 三、DOM方法及对象引用; 四、事件处理; 五、其他差异的兼容处理。 一、函数和方法差异 1. getYear()...
我们经常在处理ie和firefox下的js总会碰到一些兼容问题,下面是些总结,希望大家仔细看看研究
这也造成了在不同的浏览器中处理event的差异,这里结合一些零碎的代码来说明如何做到event在IE4+和Firefox下的正常工作。首先看如下代码: 代码如下: function doEventThing(eventTag){ var event = eventTag||...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...