Although the period in JavaScript's history of using lengthy and annoying code blocks to target specific browsers is over, it is still necessary to occasionally use simple code blocks and object detection to ensure some code works properly on user machines.
In this article, I will briefly describe the 7 different aspects of JavaScript syntax between Internet Explorer and Firefox.
1. CSS “float” attribute
The basic syntax for obtaining specific CSS properties of a given object is attributes, and attributes with hyphens should be replaced by camel nomenclature. For example, to obtain the background-color property of a div with ID "header", we need to use the following syntax:
However, since "float" is a reserved word for JavaScript, we cannot use . to obtain the "float" attribute. Here is how we use it in two browsers:
IE syntax:
Firefox syntax:
2. Element calculation style
By using the above, JavaScript can easily obtain and modify the CSS style of the object. However, the limitation of this syntax is that it can only obtain inline styles in HTML, or directly use JavaScript to set styles. The style object cannot get styles set using an external stylesheet. To get the "calculated style" of the object, we use the following code:
IE syntax:
var myObject = ("header");
var myStyle = ;
Firefox syntax:
var myObject = ("header");
var myComputedStyle = (myObject, null);
var myStyle = ;
3. Get the "class" attribute of the element
Similar to the case of the "float" attribute, the two browsers use different JavaScript methods to get this attribute.
IE syntax:
var myObject = ("header");
var myAttribute = ("className");
Firefox syntax:
var myObject = ("header");
var myAttribute = ("class");
4. Get the "for" attribute of the label tag
Like 3, there are different syntaxes to use JavaScript to get the "for" attribute of a label.
IE syntax:
var myObject = ("myLabel");
var myAttribute = ("htmlFor");
Firefox syntax:
var myObject = ("myLabel");
var myAttribute = ("for");
The same syntax is also true for the setAttribute method.
5. Get the cursor position
It is rare to get the cursor position of an element. If you need to do this, the syntax of IE and Firefox is also different. This sample code is quite basic and is generally used as part of many complex event processing, and is only used to describe the differences here. It should be noted that the results in IE are different from those in Firefox, so this method has some problems. Usually, this difference can be compensated by getting the "scroll position" - but that's the subject of another article.
IE syntax:
var myCursorPosition = [0, 0]; myCursorPosition[0] = ; myCursorPosition[1] = ;
Firefox syntax:
var myCursorPosition = [0, 0]; myCursorPosition[0] = ; myCursorPosition[1] = ;
6. Get the size of the window or browser window
Sometimes it is necessary to find out the size of the effective window space of the browser, which is usually a "window".
IE syntax:
var myBrowserSize = [0, 0]; myBrowserSize[0] = ; myBrowserSize[1] = ;
Firefox syntax:
var myBrowserSize = [0, 0]; myBrowserSize[0] = ; myBrowserSize[1] = ;
7. Alpha transparent
Well, this is not actually a syntax project for JavaScript - alpha transparency is set through CSS. However, when the object is set to fade in and out through JavaScript, this needs to be achieved by obtaining the alpha settings of the CSS, which is generally inside the loop. To change the CSS code with the following JavaScript:
IE syntax:
#myElement {
filter: alpha(opacity=50);
}
Firefox syntax:
#myElement {
opacity: 0.5;
}
To get these values using JavaScript, you need to use a style object:
IE syntax:
var myObject = ("myElement");
= "alpha(opacity=80)";
Firefox syntax:
var myObject = ("myElement");
= "0.5";
Of course, it has been mentioned that it is usually to change opcity/alpha in the middle of a loop to create animation effects, but this is a simple example, just to clearly describe how the method is implemented.
There are 7 different points in JavaScript syntax in terms of JavaScript, I hope it will be helpful to everyone's learning.