Set style information through DOM script_javascript skills-JS Tutorial-php.cn

Set style information through DOM script_javascript skills

WBOY

Release： 2016-05-16 18:19:25

Original

959 people have browsed it

Use DOM scripts to set style information: (by wushan)
In most situations, we use CSS to set styles, but in some special cases, such as setting node styles based on the position of the element in the node tree Information, there is currently no way to do this with CSS. But it can be easily accomplished using DOM.
For example: apply a certain style to the next sibling node (next element node) of all hl elements. At this time, there is no way to determine the position using CSS, but it is easy to find the element behind all hl elements using the DOM's getElementsByTagName() method. At this time, you only need to apply styles to the found elements. The following is the code list:

Copy code The code is as follows:

 
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//Detect whether the browser supports the "getElementsByTagName" method (some browsers do not support DOM) 
var headers=document. getElementsByTagName("hl"); 
for(var=0;ivar 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; 
} 

Disadvantages: Let the "behavior layer" complete the work of the "presentation layer". When you need to change the style information set by the DOM script, it is very troublesome to modify. If you can declare a class attribute for the node to be styled, then the modification will be easy. Very simple. For example, we can make the following modifications to the above example:

Copy the code The code is as follows:

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

Because this technique has a shortcoming: if the element originally has a class attribute value, then the original The attribute value will be overwritten by the new attribute value, and the original style will be lost. Therefore, we need to append a new attribute value based on the metaclass attribute value instead of overwriting it. The method is as follows:

Copy code The code is as follows:

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

Then just modify the above function:

Copy code The code is as follows:

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

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