IE is a different type of browser, but the solution is quite simple. When using Firefox and Safari, you can use the setArribute method of the element to set the class attribute of the element. IE is a different type in the current browser, but the solution is quite simple. When using Firefox and Safari to browse, you can use the setArribute method of the element to set the class attribute of the element.
Develop cross-browser JavaScript
1. Differences between childNodes and ie in ff.
Node (nodeType = 1) in ff are separated by textNode (nodeType = 3), whereas ie/op is not.
Content
In ff, there are three childNodes in box1 and one in ie.
2. Set the style class Name of a node object.
In ie, you must set the class of a node to set or get with "className" as attr.
Ff and other browsers use "class" as attr to set or get.
Code:
If (typeof node1.getAttribute ("className") = "string "){
.
}
3. Set the style content of a node object.
For example
Code:
Var oStyle = oNode. getAttribute ("style ");
// Ie
If (oStyle = "[object]") {
OStyle. setAttribute ("cssText", strStyle );
ONode. setAttribute ("style", oStyle );
} Else {
ONode. setAttribute ("style", strStyle );
}
4. event object.
Use event for ie
Evnt for ff
5. Event objects
Ie uses objEvent. srcElement
Ffuse objevent.tar get
This is related to xml file writing. Set preserveWhiteSpace of IE to true. The following is a description file from Microsoft.
Code:
Var xmlDoc = new ActiveXObject ("Msxml2.DOMDocument. 4.0 ");
XmlDoc. async = false;
XmlDoc. preserveWhiteSpace = true;
XmlDoc. load ("books. xml ");
Alert (xmlDoc. xml );
XmlDoc. async = false;
XmlDoc. preserveWhiteSpace = false;
XmlDoc. load ("books. xml ");
Alert (xmlDoc. xml );
-----------------------
1. Add rows to the table:
Document. createElement and document. the appendChild method can easily append rows to a table or create a new table with table rows from the beginning: Use document. createElement: Create a table by using document. the appendChild method adds the table cells to the table rows. Next, use document. appendChild adds the table rows to the table.
IE allows the tr element to be added to the tbody, rather than directly added to the table.
The correct way to Add rows to this table is to add rows to the table body rather than to the table, as shown in the following figure:
Var cell = document. createElement ("td"). appendChild (document. createTextNode ("foo ");
Var row = document. createElement ("tr"). appendChild (cell );
Document. getElementById ("mysqlTableBody"). appendChild (row );
Fortunately, this method is common in all current browsers, including IE. If you get into the habit of using the table body, you don't have to worry about it.
2. Set the style of the element through Javascr transform pt
You can use the setAttribute method of the element to set the style of the element through Javascr transform pt. For example, to modify the text in the span element to be displayed in red bold, you can use the setAttribute method as follows:
Var spanElement = document. getElementById ("mySpan ");
SpanElement. setAttribute ("style", "font-weight: bold; color: red ;");
Except IE, this method works on other browsers. for IE, the solution is to use the cssText attribute of the element style object to set the required style. Although this attribute is not standard, it is widely supported, as shown below:
Var spanElement = document. getElementById ("mySpan ");
SpanElement.style.css Text = "font-weight: blod; color: red ;";
This method works well on IE and most other browsers, except Opera. To make the code portable on all current browsers, you can use both methods, that is, the setAttribute method and the cssText attribute of the style object, as shown below:
Var spanElement = document. getElementById ("mySpan ");
SpanElement. setAttribute ("style", "font-weight: bold; color: red ;");
SpanElement.style.css Text = "font-weight: blod; color: red ;";
3. Set the class attribute of the element.
IE is a different type of browser, but the solution is quite simple. When using Firefox and Safari, you can use the setArribute method of the element to set the class attribute of the element, as follows:
Var element = document. getElementById ("myElement ");
Element. setAttribute ("class", "styleClass ");
Strangely, if you use the setAttribute method and specify the attribute name as class, IE does not set the class attribute of the element. On the contrary, IE recognizes the className attribute only when the setAttribute method is used.
In this case, the complete solution is to use both class and className as attribute names when using the setAttribute method of the element, as shown below:
Var element = document. getElementById ("myElement ");
Element. setAttribute ("class", "styleClass ");
Element. setAttribute ("className", "styleClass ");
Currently, most browsers use the class attribute name while ignoring the className. IE is the opposite.
4. Create input Elements
The input elements provide users with a means of page interaction. HTML itself has a limited set of input elements, including single-line text boxes, multi-line text boxes, selection boxes, selection boxes, buttons, check boxes, and single-line buttons. You may want to use Javascr transform pt to dynamically create such input elements as part of Ajax implementation.
Single-line text boxes, buttons, check boxes, and single-choice buttons can all be created as input elements, but the values of the type attribute are different. The selection box and the selection area have their own unique tags. It is very easy to dynamically create input elements through the selection Cr into pt (except single button), as long as some simple rules are followed. Using the document. createElement method, you can easily create a selection box and a selection area. You only need to pass the element tag name to document. createElement, such as select or textarea.
Single-line text boxes, buttons, check boxes, and single-choice buttons are a little more difficult, because they all have the same element name input, only the value of the type attribute is different. Therefore, to create these elements, you must not only use the document. createElement method, but also call the setAttribute method of the element to set the value of the type attribute. This is not difficult, but you must add a line of code.
Consider where to add the newly created input element to its parent element. Pay attention to the order of the document. createElement and setAttribute statements. In some browsers, the newly created element is added to its parent element only when the element is created and the type attribute is set correctly. For example, the following code segment may have strange behavior in Some browsers:
Document. getElementById ("formElement"). appendChild (button );
Button. setAttribute ("type", "button ");
To avoid any strange behavior, make sure that all the attributes of the input element are set, especially the type attribute, as follows:
Var button = document. createElement ("input ");
Button. setAttribute ("type", "button ");
Document. getElementById ("formElement"). appendChild (buttion );
Following this simple rule helps eliminate problems that may be difficult to diagnose in the future.
5. Add an event handler to the input element
Adding an event handler to an input element should be as easy as using the setAttribute method and specifying the name of the Event program as the name of the required function program, right? Error. The standard way to set the event handler for an element is to use the setAttribute method of the element. It uses the event name as the attribute name and uses the function handler as the attribute value, as shown below:
Var formElement = document. getElementById ("formElement ");
FormElement. setAttribute ("onclick", "doFoo ();");
Except for IE, the above Code can work in all current browsers. If you use the event handler set by Javascr into pt in IE, you must use the vertex method to reference the required event handler for the element and assign it to an anonymous function. This anonymous function calls the required event handler, as shown below:
Var formElement = documentgetElementById ("formElement ");
FormElement. onclick = function () {doFoo ();};
Fortunately, this technology is supported by IE and all other current browsers, so you can dynamically set the event handler for form elements through Javascr into pt.
6. Create a radio button
Except IE, all other browsers currently allow the following methods to create radio buttons (these methods should be considered );
Var readioButtion = document. createElement ("input ");
ReadioButtion. setAttribute ("type", "radio ");
ReadioButtion. setAttribute ("name", "radioButtion ");
ReadioButtion. setAttribute ("value", "checked ");
In this way, you can create a radio button in all the current browsers except IE, and it works properly. In IE, the radio button is displayed, but cannot be selected, because clicking the radio button is not selected as expected. In IE, the method for creating a single row button is completely different from that used by other browsers and is not compatible at all. The preceding radio button can be created in IE as follows:
Var radioButtion = document. createElement (" ");
This requires a browser-sniffing mechanism. IE can recognize the special attribute of the document Object known as uniqueID, which is called uniqueID. IE is the only browser that can recognize this attribute, so uniqueID is suitable for determining whether the script is running in IE.
When you use the document. uniqueID attribute to determine the browser in which the script runs, you can combine IE-specific methods and standard-compatible methods to obtain the following code:
If (document. uniqueID ){
// Internet Explorer
Var radioButtion = document. createElement (" ");
}
Else {
// Standards Compliant
Var readioButtion = document. createElement ("input ");
ReadioButtion. setAttribute ("type", "radio ");
ReadioButtion. setAttribute ("name", "radioButtion ");
ReadioButtion. setAttribute ("value", "checked ");
}
