文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Firefox和IE之间7个JavaScript差异分别是什么

2024-04-02 19:55

关注

Firefox和IE之间7个JavaScript差异分别是什么,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

尽管JavaScript历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。

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” 属性

和第三个问题一样,使用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,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯