客服咨询
备案专员
域名专员
问题提交
汇款方式
帮助首页
常见问题
视频问题
新闻公告
最新资讯
备案专题
会员管理
主站导航
首页
域名注册
虚拟主机
云主机
VPS主机
智能建站
建站服务
微信平台
企业邮箱
管理中心
欢迎来到万象互联帮助中心，我们将竭力为您解决问题！
域名问题
主机问题
邮局问题
建站问题
财务问题
汇款方式
关于我们
业务流程
会员注册
域名注册
虚拟主机
企业邮局
数据库
VPS主机
代理平台
智能建站
其他视频
公告列表
新闻信息
网站推广
网站制作
Net教程
PHP教程
JSP教程
数据库
其他信息
公告栏
法律法规
系统帮助
相关下载
政务公开
备案常见问题
登录www.163ns.com会员管理中心
您现在的位置：
万象互联帮助中心
>>
最新资讯
>>
详细内容
<<返回上一页
简述IE和Firefox使用JavaScript语法上的区别
大
中
小
文章来源：
万象互联
更新时间：
2012-9-9
分享到：
<p style="text-indent:2em;"> 本文主要从7个方面来阐述Internet Explorer 和 Firefox 在使用JavaScript 语法上的不同。 </p> <p style="text-indent:2em;"> <strong>1. CSS “float” 属性</strong> </p> <p style="text-indent:2em;"> 获取给定对象的特定 CSS 属性的基本语法是 object.style 属性，而且有连字符的属性要用骆驼命名法来代替。例如，获取一个 ID 为 “header” 的 div 的 background-color 属性，我们要用如下语法： </p> <p style="text-indent:2em;"> document.getElementById("header").style.borderBottom= "1px solid #ccc"; </p> <p style="text-indent:2em;"> 但是由于 “float” 是 JavaScript 的保留词，我们就无法使用 object.style.float 来获取 “float” 属性了。一下是我们在两种浏览器中的使用的方法： </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> document.getElementById("header").style.styleFloat = "left"; </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> document.getElementById("header").style.cssFloat = "left"; </p> <p style="text-indent:2em;"> <strong>2. 元素的计算样式</strong> </p> <p style="text-indent:2em;"> 通过使用上述的 object.style.property， JavaScript 可以很容易的获取和修改对象的设定 CSS 样式。但是这一语法的局限在于，它只能取得内联在 HTML 里的样式，或者直接使用 JavaScript 设定的样式。style 对象不能获取使用外部样式表设定的样式。为了获取对象的”计算样式”，我们使用以下代码： </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("header"); <br /> var myStyle = myObject.currentStyle.backgroundColor; </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("header");<br /> var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);<br /> var myStyle = myComputedStyle.backgroundColor; </p> <p style="text-indent:2em;"> <strong>3. 获取元素的”class”属性</strong> </p> <p style="text-indent:2em;"> 类似于”float”属性的情况，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。 </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("header");<br /> var myAttribute = myObject.getAttribute("className"); </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("header");<br /> var myAttribute = myObject.getAttribute("class"); </p> <p style="text-indent:2em;"> </p> <p style="text-indent:2em;"> <strong>4. 获取 label 标签的 “for” 属性</strong> </p> <p style="text-indent:2em;"> 和 3 一样，使用 JavaScript获取 label 的 “for” 属性也有不同语法。 </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("myLabel");<br /> var myAttribute = myObject.getAttribute("htmlFor"); </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("myLabel");<br /> var myAttribute = myObject.getAttribute("for"); </p> <p style="text-indent:2em;"> 对于 setAtrribute 方法来说也是同样的语法。 </p> <p style="text-indent:2em;"> <strong>5. 获取光标位置</strong> </p> <p style="text-indent:2em;"> 获取元素的光标位置比较少见，如果需要这么做，IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的，一般用作许多复杂事件处理的一部分，这里仅用来描述差异。需要注意的是，IE 中的结果和 Firefox 中是不同的，因此这个方法有些问题。通常，这个差异可以通过获取 “滚动位置” 来补偿 。 </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myCursorPosition = [0, 0];<br /> myCursorPosition[0] = event.clientX;<br /> myCursorPosition[1] = event.clientY; </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myCursorPosition = [0, 0];<br /> myCursorPosition[0] = event.pageX;<br /> myCursorPosition[1] = event.pageY; </p> <p style="text-indent:2em;"> <strong>6. 获取视窗或浏览器窗口的尺寸</strong> </p> <p style="text-indent:2em;"> 有时需要找出浏览器的有效窗口空间的尺寸，一般成为”视窗”。 </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myBrowserSize = [0, 0];<br /> myBrowserSize[0] = document.documentElement.clientWidth;<br /> myBrowserSize[1] = document.documentElement.clientHeight; </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myBrowserSize = [0, 0];<br /> myBrowserSize[0] = window.innerWidth;<br /> myBrowserSize[1] = window.innerHeight; </p> <p style="text-indent:2em;"> <strong>7. Alpha 透明</strong> </p> <p style="text-indent:2em;"> 嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码： </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> #myElement {<br /> filter: alpha(opacity=50);<br /> } </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> #myElement {<br /> opacity: 0.5;<br /> } </p> <p style="text-indent:2em;"> 要使用 JavaScript 获取这些值，需要使用 style 对象： </p> <p style="text-indent:2em;"> IE 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("myElement");<br /> myObject.style.filter = "alpha(opacity=80)"; </p> <p style="text-indent:2em;"> Firefox 语法： </p> <p style="text-indent:2em;"> var myObject = document.getElementById("myElement");<br /> myObject.style.opacity = "0.5"; </p> <p style="text-indent:2em;"> 当然，已经说到了，一般是在循环中间来改变 opcity/alpha，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现的。 </p> <p style="text-indent:2em;"> 文章来源：<a href="http://www.163ns.com/">http://www.163ns.com</a>，转载请注明！ </p>
分享到：
复制地址
新浪微博
腾讯微博
QQ空间
开心网
人人网
百度空间
百度贴吧
网易微博
搜狐微博
上一篇：
使用css进行网页布局需注意的几个问题
下一篇：
浅谈ping命令
相关文章：
广告联盟中的CPA、CPS、CPC、CPM分别是什么意思
云时代世界观：谁能找到位置就能抢未来的钱
中科院公布H7N9禽流感病毒源
最多点击19次即可到达任意网页
FTP主动模式/被动模式两种工作模式对比
在线咨询
客服咨询
企业qq交谈
QQ：800009888
备案专员
企业qq交谈
QQ：973907313
域名专员
企业qq交谈
QQ：6584830
在线时间
8:00-17:40
