JS in Browser compatibility Tutorial: Style access and settings

Article Introduction: The most basic syntax for JavaScript to access a given CSS value is: Object.style.property, but some CSS properties are named the same as reserved words in JavaScript.

1. css "Float" property

The most basic syntax for parsing JavaScript to access a given CSS value is: Object.style.property, but some CSS properties are named the same as reserved words in JavaScript, such as "float", "for", "class", etc. Different browsers are written differently.

Write this in IE:

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

Write this in Firefox:

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

Compatibility processing adds a judgment before writing to determine whether the browser is ie:

if (document.all) {document.getElementById ("header"). Style.stylefloat = "Left";}
else{document.getElementById ("header"). Style.cssfloat = "Left";}

2. Access <label> tags "for"

As with the "Analysis notes" and "float" properties, it is also necessary to use an ambiguous syntactic distinction to access the "for" in <label> tags.

Write this in IE:

var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("htmlfor");

Write this in Firefox:

var myObject = document.getElementById ("MyLabel");
var myattribute = Myobject.getattribute ("for");

Compatibility handling is also a way to determine the browser type first.

3. Access and Set class properties

The analysis notes also because class is the reason for JavaScript reserved words, the two browsers use different JavaScript methods to get this property.

All versions of IE before IE8.0:

var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("ClassName");

Apply to IE8.0 and Firefox:

var myObject = document.getElementById ("header");
var myattribute = Myobject.getattribute ("class");

Also, when you set the class attribute using setattribute (), the same differences exist between the two browsers.

SetAttribute ("ClassName", value);

This applies to all IE versions prior to IE8.0, noting that IE8.0 also does not support the "ClassName" attribute.

SetAttribute ("Class", value), applicable to IE8.0 and Firefox.

"Compatibility Handling"

Method One, both of which are written:

var myObject = document.getElementById ("header");
Myobject.setattribute ("Class", "Classvalue");
Myobject.setattribute ("ClassName", "Classvalue"); Set the header's class to Classvalue

Method two, IE and FF support Object.classname, so you can write this:

var myObject = document.getElementById ("header");
Myobject.classname= "Classvalue";/Set header class to Classvalue

Method Three, first determine the browser type, and then according to the browser type to use the corresponding wording.

4. Object width and Height assignment problem

Statements that resemble Obj.style.height = Imgobj.height are not valid in the "Analysis" Firefox.

"Compatible processing" unified use Obj.style.height = Imgobj.height + ' px ';

5. Add Style

"Analysis" IE uses the Addrules () method to add styles, such as: Stylesheet.addrule ("P", "Color: #ccc", stylesheet.length). This method is not compatible with FF, which uses insetrule in FF ( ) method substitution. such as Stylesheet.insertrule ("P{color: #ccc}", Stylesheet.length).

"Compatible with" if (Stylesheet.insertrule) {

Insertrule () method

}else{

Addrule () method

}

6. Final style

"Analysis Notes" sometimes our custom styles are invalidated because of overlapping styles, such as a style defined by a class selector and a style defined by a label selector, at which point the latter fails. You need to use the final style at this point. The final style in IE is ele.currentstyle. property name. The standard notation in DOM is the use of Document.defaultview objects, such as Document.defaultView.getComputedStyle (Elel,null), which is compatible with FF.

"Compatible processing" first determines the browser (document.all), and then executes the above method.