Set style information through DOM script

Use DOM scripts to set style information: (by wushan)
In most cases, we use CSS to set styles, but in some special cases, such as when setting node style information based on the location of the element in the node tree, CSS cannot do this yet. But it can be easily done with DOM.
For example: apply a certain style to the next sibling node (next element node) of all hl elements. At this time, it is impossible to determine the position with CSS, but it is easy to find the element behind all hl elements using the getElementsByTagName( ) method of DOM. At this time, just apply a style to the found element. Here is a list of codes:

Copy the codeThe code is as follows:

 
function styleHeaderSibling( ){ 
if(!) return false; 
//Detect whether the browser supports the "getElementsByTagName" method (some browsers do not support DOM)
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
=”bold”; 
=”1.2em”; 
} 
} 
function getNextElement(node){ 
if(==1){ //This node is a text node
return node; 
 } 
if(){ 
retnrn getNextElement(); 
　 } 
return null; 
} 

Insufficient: Let the "behavior layer" complete the "presentation layer" work. When it is necessary to change the style information set by the DOM script, it is very troublesome to modify. If a class attribute can be declared to the node to which the style is to be set, then it will be very simple to modify. For example, we can make the following modifications to the above example:

Copy the codeThe code is as follows:

 
function styleHeaderSibling( ){ 
if(!) return false; 
//Detect whether the browser supports the "getElementsByTagName" method
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
=”intro”; 
//The syntax for setting the class attribute value for an element is: =value
} 
} 

Because this technique has a disadvantage: if the element originally has the class attribute value, the original attribute value will be overwritten by the new attribute value, and the original style will be lost. We need to add new attribute value to the meta class attribute value instead of overwriting. The method is as follows:

Copy the codeThe code is as follows:

 
function addClass(element,value)｛ 
if(!){ 
=value; 
 }else{ 
newclassName=; 
newclassName +=" "; // Pay attention to this space
newclassName +=value; 
=newclassName; 
} 
｝ 

Then modify the above function:

Copy the codeThe code is as follows:

 
function styleHeaderSibling( ){ 
if(!) return false; 
//Detect whether the browser supports the "getElementsByTagName" method
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
addClass(elem,”intro”); 
} 
} 

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