Sharing of 7 different syntaxes in JavaScript between IE and Firefox_javascript skills

In this article, the author introduces 7 different JavaScript syntaxes in IE and Firefox.

1. CSS "float" value

The most basic syntax for accessing a given CSS value is: object.style.property, using camelCase to replace the value with connectors , for example, to access the background-color value of a

with the ID "header", we use the following syntax:

document.getElementById("header").style.backgroundColor= "#ccc" ;

But since the word "float" is a JavaScript reserved word, we cannot use object.style.float to access it. Here, we can do this in two browsers:

Write this in IE:

Copy code The code is as follows:

document.getElementById(" header").style.styleFloat = "left";

Write this in Firefox:

Copy code The code is as follows:

document.getElementById("header").style.cssFloat = "left";

2. The estimated style of the element
JavaScript can use the object.style.property syntax to easily access and modify a CSS style externally, but the limitation is that these syntaxes can only take out already set inline styles or styles set directly by JavaScript. It cannot access an external style sheet. To access the "imputed" style of an element we can use the following code:

In IE write this:

Copy code The code is as follows:

var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;

In In Firefox, write this:

Copy code The code is as follows:

var myObject = document.getElementById( "header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

3. Access the element's "class"
Like "float", "class" is a reserved word of JavaScript. In these two browsers, we use the following syntax to access "class".

Write this in IE:

Copy the code The code is as follows:

var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

Write this in Firefox:

Copy code The code is as follows:

var myObject = document.getElementById("header");
var myAttribute = myObject. getAttribute("class");

This syntax would also apply using the setAttribute method.

4. Access the "for"
in the label As mentioned in point 3, we also need to use invisible syntactic distinction to access the "for" in the tag:

Write this in IE:

Copy code The code is as follows:

var myObject = document.getElementById("myLabel");
var myAttribute = myObject. getAttribute("htmlFor");

Write this in Firefox:

Copy code The code is as follows :

var = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

5. Get the mouse pointer position
Calculating the mouse pointer position may be very uncommon for you, but when you need it, the syntax is different in IE and Firefox. The code written here will be the most basic, or it may be a certain part of a complex event processing. But they can explain the similarities and differences. At the same time, it must be pointed out that the results of IE will be more different than Firefox, and this method itself has bugs. Usually, this difference can be compensated with "drag position", but that's an article for another topic :) !

Write this in IE:

Copy code The code is as follows:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;

Write this in Firefox:

Copy code The code is as follows:

var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

6. Get the size of the visible area and window
Sometimes, we need to find the size of the visible position of the browser, usually we call it the "visible area".

Write this in IE:

Copy the code The code is as follows:

var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;

Like this in Firefox Write:

Copy code The code is as follows:

var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

7. Alpha Transparent
Well, this is not a JavaScript syntax issue, Instead, it comes from CSS’s Alpha transparency. But when an object needs to fade in/out, JavaScript is required to perform it. This is done by accessing the Alpha transparency setting of CSS, usually in a loop. The JavaScript code you need to modify is as follows:

in IE:

#myElement { filter: alpha(opacity=50); }

in Write this in Firefox:

#myElement { opacity: 0.5; }

Write this in IE:

Copy code The code is as follows:

var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";

Write this in Firefox:

Copy the code The code is as follows:

var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

Related labels：

firefox ie

source：php.cn

Previous article：Web standard implementation of paging bar_javascript skills Next article：Loading Javascript best practices_javascript tips

Statement of this Website

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

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

Where should I start to make this page responsive? <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8...

From 2024-04-04 21:21:25

0

1

457

How to get input value through onblur event? I'm trying to get the value input via onblur event but it doesn't work when I use JS modul...

From 2024-04-03 08:55:32

0

1

360

Unable to send data from axios to node server returning empty object My client code: <htmllang="en"><head><metacharset="UTF-8&quo...

From 2024-03-31 11:14:22

0

1

2476

Related Topics

More>

• ie shortcut cannot be deleted
• How to solve the problem that IE shortcut cannot be deleted
• What are the servers that are exempt from registration?
• What are the disk cleanup commands?
• Common HTML tags
• Solution to WIN10 update failure
• css font color
• Introduction to input functions in c language