Javascript controls CSS

I checked JS and CSS in the last row. Then I suddenly wanted to try JavaScript to control CSS. After all, it may be used in the future. I checked the following information on the Internet:

Assignment Method:Usage: element (node .style.css attributes
CSS attribute writing is special.
A word can be written directly, with the first letter in the middle of the horizontal bar in lower case, and the last letter in upper case, without horizontal bar links
There are several other special features, such as writing the float attribute of common CSS
Document. getelementbyid ("div01" ).style.css float;
Because float is a reserved JS word.
There is no other difference.
Document. getelementbyid ("div01"). style. height;
Document. getelementbyid ("div01"). style. lineheight;
Document. getelementbyid ("div01"). style. backgroundcolor;

The following is an in-depth example. You can customize the CSS attributes in an object and use these attributes to set the style of the current node:

Function changecss (){
VaR S = {backgroundcolor: "# 0099ff", width: "40px"}; // contains CSS attributes
VaR node = Document. getelementbyid ("A"); get the node
For (var c in S ){
EVAl ("node. style. "+ C +" = s [c] "); // The original execution is as follows: node. style. proname = s [c]; however, because proname (attribute name) is unknown and needs to be retrieved through S object, EVThrough this function, the stored string can be executed as an expression. This is a very practical method!
}
}

Ii. Use the classname attribute of a node to change its CSS

Another way is to control the class attribute of the tag to change the overall CSS style. Usage:

<Font id = "A"> AA </font>

//////////////////////////////////////// /////////

<Style id = "CSS" type = "text/CSS">

. CSS {

Background: red;

}

</Style>

//////////////////////////////////////// ////////////

VaR node = Document. getelementbyid ("");

Node. classname = "CSS ";

3. Get CSS attribute values related to nodes

The above method can be said to set a value to CSS or change CSS. How to get the CSS style attribute value of the current node? After a long time, I finally found out:

IE: node. currentstyle ['Property name']

Hh: Document. defaultview. getcomputedstyle (node, null) ['Property name'];

A comparison method on the internet is as follows:

Function getcurrentstyle (OBJ, Prop ){

If (obj. currentstyle ){

Return obj. currentstyle [prop];

}

Else if (window. getcomputedstyle ){

Propprop = prop. Replace (/([A-Z])/g, "-$1 ");

Propprop = prop. tolowercase ();

Return document. defaultview. getcomputedstyle (OBJ, null) [prop];

}

}