FF和IE之间7个JavaScript的差异
JavaScript 之间 IE 差异 FF
2023-06-13 09:14:09 时间
这篇文章中,我会略述一下InternetExplorer和Firefox在JavaScript语法上不同的7个方面。
1.CSS“float”属性
获取给定对象的特定CSS属性的基本语法是object.style属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个ID为“header”的div的background-color属性,我们要用如下语法:
document.getElementById("header").style.borderBottom="1pxsolid#ccc";
但是由于“float”是JavaScript的保留词,我们就无法使用object.style.float来获取“float”属性了。一下是我们在两种浏览器中的使用的方法:
IE语法:
复制代码代码如下:
1.CSS“float”属性
获取给定对象的特定CSS属性的基本语法是object.style属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个ID为“header”的div的background-color属性,我们要用如下语法:
document.getElementById("header").style.borderBottom="1pxsolid#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语法:
varmyObject=document.getElementById("header");
varmyStyle=myObject.currentStyle.backgroundColor;
Firefox语法:
varmyObject=document.getElementById("header");
varmyComputedStyle=document.defaultView.getComputedStyle(myObject,null);
varmyStyle=myComputedStyle.backgroundColor;
3.获取元素的“class”属性
类似于“float”属性的情况,这两种浏览器使用不同的JavaScript方法来获取这个属性。
IE语法:
varmyObject=document.getElementById("header");
varmyAttribute=myObject.getAttribute("className");
Firefox语法:
varmyObject=document.getElementById("header");
varmyAttribute=myObject.getAttribute("class");
4.获取label标签的“for”属性
和3一样,使用JavaScript获取label的“for”属性也有不同语法。
IE语法:
varmyObject=document.getElementById("myLabel");
varmyAttribute=myObject.getAttribute("htmlFor");
Firefox语法:
varmyObject=document.getElementById("myLabel");
varmyAttribute=myObject.getAttribute("for");
对于setAtrribute方法来说也是同样的语法。
5.获取光标位置
获取元素的光标位置比较少见,如果需要这么做,IE和Firefox的语法也是不同的。这个示例代码是相当基础的,一般用作许多复杂事件处理的一部分,这里仅用来描述差异。需要注意的是,IE中的结果和Firefox中是不同的,因此这个方法有些问题。通常,这个差异可以通过获取“滚动位置”来补偿-但那是另外一篇文章的课题了。
IE语法:
varmyCursorPosition=[0,0];
myCursorPosition[0]=event.clientX;
myCursorPosition[1]=event.clientY;
Firefox语法:
varmyCursorPosition=[0,0];
myCursorPosition[0]=event.pageX;
myCursorPosition[1]=event.pageY;
6.获取视窗或浏览器窗口的尺寸
有时需要找出浏览器的有效窗口空间的尺寸,一般成为”视窗”。
IE语法:
varmyBrowserSize=[0,0];
myBrowserSize[0]=document.documentElement.clientWidth;
myBrowserSize[1]=document.documentElement.clientHeight;
Firefox语法:
varmyBrowserSize=[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语法:
varmyObject=document.getElementById("myElement");
myObject.style.filter="alpha(opacity=80)";
Firefox语法:
varmyObject=document.getElementById("myElement");
myObject.style.opacity="0.5";
当然,已经说到了,一般是在循环中间来改变opcity/alpha,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。
原文:http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie
译文:http://www.qianduan.net/between-firefox-and-ie-differences-7-javascript.html
相关文章
- javascript 基础_JavaScript高级编程
- JavaScript中prototype用法
- [译] JavaScript -- Map vs ForEach
- 【说站】javascript substr截取字符串
- javascript uint8数组和uint32之间的转换
- Vue项目打包报错:JavaScript heap out of memory
- JavaScript变量 | 作用域
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- 国外的为初学者写的JavaScript教程
- javascript像素拼图实现代码
- JavaScript验证浏览器是否支持javascript的方法小结
- javascript流畅动画实现原理
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
- Javascript在IE和FireFox中的不同表现简析
- php和javascript之间变量的传递实现代码
- javascript根据像素点取位置示例
- javascript不同类型数据之间的运算的转换方法
- javascript判断是否按回车键并解决浏览器之间的差异
- javascript操作符(~、&、|、^、<<、>>)使用案例
- JavaScript中的变量作用域介绍
- javascript浏览器窗口之间传递数据的方法