Use DOM script to set style information: (by Wushan)
On most occasions, we use CSS to set styles, but in some special cases, for example, to set the node style information based on the position of the element in the node tree, CSS is not yet able to do this. But using DOM can be done easily.
For example, apply a certain style to the next sibling node of all HL elements (the next element node). There is no way to determine the location with CSS, but using the DOM getElementsByTagName () method is easy to find all the elements behind the HL element, at this time, as long as the element to find out the style can be applied. Here's the code listing:
Copy Code code as follows:
function styleheadersibling () {
if (!document.getelementsbytagname) return false;
Probe whether the browser supports the "getElementsByTagName" method (DOM is not supported by individual browsers)
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;
}
Insufficient: Let the "behavior layer" to complete the "performance layer" work, when you need to change the DOM script set the style information, it is cumbersome to modify, if you can set the style of the node to declare a class attribute, then it will be easy to modify. For example, we can make the following modifications to the above examples:
Copy Code code as follows:
function styleheadersibling () {
if (!document.getelementsbytagname) return false;
Probe whether the browser supports the "getElementsByTagName" method
var headers=document. getElementsByTagName ("HL");
for (var=0;ivar elem=getnextelement (headers[i].nextsibling);
Elem.classname= "Intro";
The syntax for setting the class attribute value for an element is: Elements.classname=value
}
}
There is a shortage of this technique: if the element originally had a class attribute value, then the original attribute value will be overwritten by the new attribute value, the original style will be lost, all we want to append the new attribute value on the basis of the Meta class attribute value, instead of overwriting, the method is as follows:
Copy Code code as follows:
function AddClass (element,value) {
if (!element.classname) {
Element.classname=value;
}else{
Newclassname=element.classname;
Newclassname + = ""; Notice this space
Newclassname +=value;
Element.classname=newclassname;
}
｝
Then the above function can be modified:
Copy Code code as follows:
function styleheadersibling () {
if (!document.getelementsbytagname) return false;
Probe whether the browser supports the "getElementsByTagName" method
var headers=document. getElementsByTagName ("HL");
for (var=0;ivar elem=getnextelement (headers[i].nextsibling);
AddClass (Elem, "Intro");
}
}
Description: In general, the use of DOM to set the style is very unwise, this method only in CSS can not be required to set the style to enrich the content of the page.
