search
HomeWeb Front-endJS TutorialDifferences in JavaScript syntax between IE and Firefox_javascript tips

儘管JavaScript 歷史上使用冗長而令人生厭的程式碼區塊來標的特定瀏覽器的時期已經結束了,但是偶爾使用一些簡單的程式碼區塊和物件偵測來確保一些程式碼在用戶機器上正常運作依然是必要的。

這篇文章中,我會略述 Internet Explorer 和 Firefox 在 JavaScript 語法上不同的 7 個面向。

1. CSS “float” 屬性

取得給定物件的特定 CSS 屬性的基本語法是 object.style 屬性,而且有連字號的屬性要用駱駝命名法來代替。例如,取得 ID 為 “header” 的 div 的 background-color 屬性,我們要使用以下語法:

複製程式碼 程式碼如下:
document.getElementById("header").style.bx solid #ccc";

但由於 “float” 是 JavaScript 的保留詞,我們就無法使用 object.style.float 來取得 “float” 屬性了。一下是我們在兩種瀏覽器中的使用的方法:

IE 文法: 

複製程式碼 程式碼如下:
document.getElementById("header").style.styleFloat = "left ";

Firefox 語法: 

複製程式碼 程式碼如下:
document.getElementById("header").style.cssFloat = ".leftleft ";

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

7个方面在JavaScript语法上不同的点,希望对大家的学习有所帮助。

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Ubuntu Linux中如何删除Firefox Snap?Ubuntu Linux中如何删除Firefox Snap?Feb 21, 2024 pm 07:00 PM

要在UbuntuLinux中删除FirefoxSnap,可以按照以下步骤进行操作:打开终端并以管理员身份登录到Ubuntu系统。运行以下命令以卸载FirefoxSnap:sudosnapremovefirefox系统将提示你输入管理员密码。输入密码并按下Enter键以确认。等待命令执行完成。一旦完成,FirefoxSnap将被完全删除。请注意,这将删除通过Snap包管理器安装的Firefox版本。如果你通过其他方式(如APT包管理器)安装了另一个版本的Firefox,则不会受到影响。通过以上步骤

es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

Internet Explorer 打开 Edge:如何停止 MS Edge 重定向Internet Explorer 打开 Edge:如何停止 MS Edge 重定向Apr 14, 2023 pm 06:13 PM

长期以来,InternetExplorer的失宠一直不是秘密,但随着Windows11的到来,现实开始了。Edge将来不再有时取代IE,它现在是微软最新操作系统中的默认浏览器。目前,您仍然可以在Windows11中启用InternetExplorer。但是,IE11(最新版本)已经有了一个正式的退役日期,即2022年6月15日,时间在流逝。考虑到这一点,您可能已经注意到InternetExplorer有时会打开Edge,而您可能不喜欢它。那么为什么会这样呢?在

win11无法使用ie11浏览器怎么办?(win11用不了ie浏览器)win11无法使用ie11浏览器怎么办?(win11用不了ie浏览器)Feb 10, 2024 am 10:30 AM

越来越多的用户开始升级win11系统,由于每个用户的使用习惯不同,还是有不少用户在使用ie11浏览器,那么win11系统用不了ie浏览器,该怎么办呢?windows11还支持ie11吗?下面就来看看解决办法。win11无法使用ie11浏览器的解决方法1、首先右键开始菜单,选择“命令提示符(管理员)”打开。2、打开之后,直接输入“Netshwinsockreset”,回车确定。3、确定之后再输入“netshadvfirewallreset&rdqu

mozilla firefox可以卸载吗mozilla firefox可以卸载吗Mar 15, 2023 pm 04:40 PM

mozilla firefox可以卸载;firefox属于第三方浏览器,如果不需要,完全可以卸载。卸载方法:1、在开始菜单中,依次点击“Windwos系统”-“控制面板”;2、在“控制面板”界面中,点击“程序和功能”;3、在新界面中,找到并双击火狐浏览器图标;4、在卸载弹窗中,点击“下一步”;5、点击“卸载”即可。

Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Win10打开IE自动跳转到Edge怎么取消_IE浏览器页面自动跳转的解决办法Mar 20, 2024 pm 09:21 PM

近期不少的win10用户们在使用电脑浏览器的时候发现自己的ie浏览器总是自动的跳转到edge浏览器,那么win10打开ie自动跳转edge怎么关闭?。下面就让本站来为用户们来仔细的介绍一下win10打开ie自动跳转edge关闭方法吧。1、我们登录edge浏览器,点击右上角...,找下拉的设置选项。2、我们进入设置后,在左侧栏点击默认浏览器。3、最后我们在兼容性中,勾选不允许IE模式下重新加载网站,重启ie浏览器即可。

一个时代的结束:Internet Explorer 11 已退役,这是你需要知道的一个时代的结束:Internet Explorer 11 已退役,这是你需要知道的Apr 20, 2023 pm 06:52 PM

2022年6月15日是Microsoft结束对InternetExplorer11(IE11)的支持并关闭其旧版浏览器章节的日子。一段时间以来,该公司一直在提醒用户注意这一生命周期结束日期,并呼吁他们计划迁移到MicrosoftEdge。Microsoft将IE11与Windows8.1捆绑在一起,作为Windows的现代默认Web浏览器。尽管它从未达到Chrome的(当前)高度,但它是2014年使用量第二大的桌面浏览器,仅次于IE8。当然,随着20

ie快捷方式无法删除如何解决ie快捷方式无法删除如何解决Jan 29, 2024 pm 04:48 PM

ie快捷方式无法删除的解决办法:​1、权限问题;2、快捷方式损坏;3、软件冲突;4、注册表问题;5、恶意软件;6、系统问题;7、重新安装IE;8、使用第三方工具;9、检查快捷方式的目标路径;10、考虑其他因素;11、咨询专业人士。详细介绍:​1、权限问题,右键点击快捷方式,选择“属性”,在“安全”选项卡中,确保有足够的权限删除该快捷方式,如果没有,可以尝试以管理员身份运行等等。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.