Differences 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 屬性,我們要使用以下語法:
但由於 “float” 是 JavaScript 的保留詞,我們就無法使用 object.style.float 來取得 “float” 屬性了。一下是我們在兩種瀏覽器中的使用的方法:
IE 文法:
Firefox 語法:
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语法上不同的点,希望对大家的学习有所帮助。

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Python is more suitable for data science and machine learning, while JavaScript is more suitable for front-end and full-stack development. 1. Python is known for its concise syntax and rich library ecosystem, and is suitable for data analysis and web development. 2. JavaScript is the core of front-end development. Node.js supports server-side programming and is suitable for full-stack development.

JavaScript does not require installation because it is already built into modern browsers. You just need a text editor and a browser to get started. 1) In the browser environment, run it by embedding the HTML file through tags. 2) In the Node.js environment, after downloading and installing Node.js, run the JavaScript file through the command line.

How to send task notifications in Quartz In advance When using the Quartz timer to schedule a task, the execution time of the task is set by the cron expression. Now...

How to obtain the parameters of functions on prototype chains in JavaScript In JavaScript programming, understanding and manipulating function parameters on prototype chains is a common and important task...

Analysis of the reason why the dynamic style displacement failure of using Vue.js in the WeChat applet web-view is using Vue.js...


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SublimeText3 Chinese version
Chinese version, very easy to use

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.