Set style information through DOM script _ javascript skills

In most cases, we use CSS to set styles. However, in some special cases, for example, to set the node style information based on the position of an element in the node tree, currently, CSS cannot do this. However, DOM can be easily used. Use DOM scripts to set style information: (by wushan)
In most cases, we use CSS to set styles. However, in some special cases, for example, to set the node style information based on the position of an element in the node tree, currently, CSS cannot do this. However, DOM can be easily used.
For example, apply a certain style to the next sibling node (next element node) of all hl elements. At this time, CSS cannot be used to determine the position, but the getElementsByTagName () method of DOM can easily find the element behind all hl elements, at this time, you only need to apply a style to the element. The following is a code list:

The Code is as follows:

Function styleHeaderSibling (){
If (! Document. getElementsByTagName) return false;
// Check whether the browser supports the "getElementsByTagName" method (DOM is not supported in some browsers)
Var headers = document. getElementsByTagName ("hl ");
For (var = 0; I Var elem = getNextElement (headers [I]. nextSibling );
Elem. style. fontWeight = "bold ";
Elem. style. fontsize = "1.2em ";
}
}
Function getNextElement (node ){
If (node. nodeType = 1) {// This node is a text node
Return node;
}
If (node. nextSibling ){
Retnrn getNextElement (node. nextSibling );
}
Return null;
}

Insufficient: let the "behavior layer" complete the "performance Layer" work. It is troublesome to modify the style information set by the DOM script, if you can declare a class attribute for the node whose style you want to set, it will be easy to modify. For example, we can modify the preceding example as follows:

The Code is as follows:

Function styleHeaderSibling (){
If (! Document. getElementsByTagName) return false;
// Check whether the browser supports the "getElementsByTagName" Method
Var headers = document. getElementsByTagName ("hl ");
For (var = 0; I Var elem = getNextElement (headers [I]. nextSibling );
Elem. className = "intro ";
// The syntax for setting the class attribute value for an element is elements. className = value.
}
}

This technique has some disadvantages: If the element originally has a class attribute value, the original attribute value will be overwritten by the new attribute value, and the original style will be lost, all new attribute values should be appended Based on the meta-class attribute values, instead of overwriting. The method is as follows:

The Code is as follows:

Function addClass (element, value ){
If (! Element. className ){
Element. className = value;
} Else {
NewclassName = element. className;
NewclassName + = ""; // note this space
NewclassName + = value;
Element. className = newclassName;
}
}

Then, modify the above function:

The Code is as follows:

Function styleHeaderSibling (){
If (! Document. getElementsByTagName) return false;
// Check whether the browser supports the "getElementsByTagName" Method
Var headers = document. getElementsByTagName ("hl ");
For (var = 0; I Var elem = getNextElement (headers [I]. nextSibling );
AddClass (elem, "intro ");
}
}

Note: In general, it is unwise to use DOM to set styles. This method is used only when CSS cannot set styles as required to enrich the page content.