Although it's time to use long string, dull, and different branch code to handle different browsers
Even though it's time to use long string, dull, and different branch code to handle different browsers, occasionally, it is necessary to make some simple differentiation and target detection to ensure that a piece of code can run properly on the user's machine. The following describes some different JavaScript syntaxes in IE and Firefox.
CSS "float" Value
The most basic syntax for accessing a given CSS value is: object. style. property, replace the value with a connector using the camper method. For example, to access the background-color value with an ID of "header", we use the following syntax:
document.getElementById("header").style.backgroundColor= "#ccc";
However, because the word "float" is a reserved JavaScript word, we cannot use object. style. float for access. Here, we can do this in two browsers:
Write in IE as follows:
document.getElementById("header").style.styleFloat = "left";
Write in Firefox as follows:
document.getElementById("header").style.cssFloat = "left";
Element Calculation Style
JavaScript can use object. style. property syntax, which allows you to easily access and modify a CSS style externally. However, the restriction is that these syntaxes can only retrieve the style set in the row or directly set by JavaScript. You cannot access an external style sheet. To access the "Estimate" style of an element, we can use the following code:
Write in IE as follows:
var myObject = document.getElementById("header"); var myStyle = myObject.currentStyle.backgroundColor;
Write in Firefox as follows:
var myObject = document.getElementById("header"); var myComputedStyle = document.defaultView.getComputedStyle(myObject, null); var myStyle = myComputedStyle.backgroundColor;
The "class" of the access element"
Like "float", "class" is a reserved word of JavaScript. In these two browsers, we use the following syntax to access "class ".
Write in IE as follows:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("className");
Write in Firefox as follows:
var myObject = document.getElementById("header"); var myAttribute = myObject.getAttribute("class");
Access "For" in the tag"
As mentioned in point 3rd, we also need to use non-existent syntaxes to access"For" in the tag ":
Write in IE as follows:
var myObject = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("htmlFor");
Write in Firefox as follows:
var = document.getElementById("myLabel"); var myAttribute = myObject.getAttribute("for");
Obtain the cursor position
It may be rare for you to calculate the cursor position, but the syntax in IE and Firefox is different when you need it. The code written here is the most basic and may be a part of the processing of a complex event. But they can explain the similarities and differences. At the same time, it must be noted that the results are different from those of Firefox, and this method itself has bugs. In general, you can use the "drag position" to compensate for this difference.
Write in IE as follows:
var myCursorPosition = [0, 0]; myCursorPosition[0] = event.clientX; myCursorPosition[1] = event.clientY;
Write in Firefox as follows:
var myCursorPosition = [0, 0]; myCursorPosition[0] = event.pageX; myCursorPosition[1] = event.pageY;
Obtain the visible area and window size
Sometimes, we need to find the size of the visible position of the browser, which is usually called "visible area ".
Write in IE as follows:
var myBrowserSize = [0, 0]; myBrowserSize[0] = document.documentElement.clientWidth; myBrowserSize[1] = document.documentElement.clientHeight;
Write in Firefox as follows:
var myBrowserSize = [0, 0]; myBrowserSize[0] = window.innerWidth; myBrowserSize[1] = window.innerHeight;
Alpha transparency
Well, this is not a JavaScript syntax problem, but is derived from the Alpha transparency of CSS. However, JavaScript is required when an object needs to fade in/out. This is done by accessing the Alpha transparent settings of CSS, usually in a loop. The JavaScript code you need to modify is as follows:
Write in IE as follows:
#myElement { filter: alpha(opacity=50); }
Write in Firefox as follows:
#myElement { opacity: 0.5; }
Write in IE as follows:
var myObject = document.getElementById("myElement"); myObject.style.filter = "alpha(opacity=80)";
Write in Firefox as follows:
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
Address of this article: http://www.nowamagic.net/librarys/veda/detail/452,welcome.