Firefox vs. ie 7 JavaScript differences

Source: Internet
Author: User



Author Note: This article, published in 2009.04.27, is an article on the discussion of the existence of JavaScript between IE6, IE7, and ff2+ and FF3.0.






Although the history of having to use lengthy JavaScript code to identify a particular browser is over, however. It is occasionally necessary to use a simple JavaScript code and object Check to ensure that a particular JavaScript block of code can be executed on the user's machine. In this article, I will outline the differences in JavaScript syntax between IE and FF from 7 aspects.









1. css "Float" property



The basic syntax for getting a specific CSS property for a given object is Object.style.property. Properties with hyphens are replaced by camel nomenclature, for example, to get an background-color attribute for a div with the ID "header". The syntax is as follows:




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

But since JavaScript has a float as a reserved word, we can't useobject.style.float syntax to get the property. In IE and FF, we can do this:





IE Syntax:




    document.getElementById ("header"). Style.stylefloat = "Left";  

FF Syntax:






    document.getElementById ("header"). Style.cssfloat = "Left";  





2. Calculation style of elements



By using the object.style.property above, JavaScript can easily get and alter the object's set CSS style. But the limitation of this syntax is that it can only get inline in HTML style, or directly using JavaScript settings.



Style objects cannot get styles that are set using an external style sheet.



In order to get the "calculated style" of the object, we use the following code:



IE Syntax:




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

FF Syntax:






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





3. Get the class attribute of the element



Similar to the "float" property. Both IE and FF can use JavaScript's GetAttribute method, but the syntax is slightly different:



IE Syntax:




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

FF Syntax:






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

The same difference applies to the SetAttribute method as well.











4. Gets the for property of the label label



Similar to the above, we have different JavaScript syntax to get the label label's for property.



IE Syntax:




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

FF Syntax:






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

5. Get cursor Position





Getting the cursor position of the element is relatively rare, assuming that the need to do so, IE and Firefox syntax is also different.



This demo sample code is fairly basic and is generally used as part of many complex event processing. This is used only to describe the narrative differences. It is important to note that the results in IE are different from those in Firefox. So there are some problems with this approach.



Typically, this difference can be compensated by acquiring a "scrolling position"-but that is the subject of another article.



IE Syntax:




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

FF Syntax:






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

6. Get the size of the window or browser form





Sometimes it is necessary to find out the size of the browser's effective form space, which generally becomes "Windows".






IE Syntax:




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

FF Syntax:






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

7, Alpha transparent processing





This is not a JavaScript syntax problem, alpha transparency is set through CSS. However, when the object is set to fade through JavaScript, this needs to be done inside the loop by getting the alpha setting of the CSS. Use the following JavaScript to change the CSS code.






IE Syntax:




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

FF Syntax:






#myElement {  
        opacity: 0.5;  
    }  

In order for JavaScript to get these values, you need to use a style object.





IE Syntax:




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

FF Syntax:






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

Of course, as mentioned, you need to change the alpha/opacity value through the internal loop to achieve the animation effect. But this is just a simple example of how to use it to work.








Are there any other differences?



These differences are something I have personally encountered in development or research, and of course there are other differences, assuming that you think I missed out on one important aspect. Be able to leave your comments. I'm going to update this list of differences. or post a blog.






original link: http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment -624









Firefox vs. ie 7 JavaScript differences


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.