网站建设知识

首页 > 免费 > 网站建设知识 >

汇仁智杰告诉你IE和火狐之间的7个JavaScript差异

来源:北京汇仁智杰科技有限公司   时间:2016-04-22   点击:

  经常打代码的人都知道,我们在做网站建设的时候,经常会有这语言,那方法的。昨天晚上朋友问小编在IE和火狐之间JS有什么区别呢?那今天小编就把整理的分享给大家,希望对您有所帮助。
  尽管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,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13370157521
业务QQ:373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰