Easy to learn JavaScript twenty-four: how to operate CSS styles in DOM programming Learning (1)

Easy to learn JavaScript twenty-four: how to operate CSS styles in DOM programming Learning (1)

CSS styles are used as an aid in HTML to enhance the page display effect. I learned how to operate HTML by DOM, so I also want to operate CSS by DOM.

Style method. When learning CSS, we already know that there are three situations in which CSS is inserted into HTML documents: Intra-row, embedded, and external.

(This is what we use most ). The following describes how to perform these three operations:

1. Intra-row operation

First, write an HTML document:

 

<Script type = "text/javascript"> window. onload = function () {}</script> div Region

 

 

Any HTML element tag has a common attribute: style, which returns the CSSStyleDeclaration object. Below is the most common

Use JavaScript DOM to access CSS in-row styles.

CSS attributes and JavaScript calls

Instance:

 

// Obtain the Element Node var box = document in the row style. getElementById ("box"); alert (box. style); // return: object CSSStyleDeclaration indicates the style object alert (box. style. color); // return: rdb (255,255,255) indicates white. Different browsers have different results, alert (box. style. backgroundColor); // return value: rdb(0,255, 01_green. Different browsers may have different results: alert(box.style.css Float | box. style. styleFloat); // return: right

 

Note the following when calling JavaScript:

(1) if it is a common CSS attribute, you can use its attribute name for calling. For example, style. color.

(2) If CSS attributes such as background-color are called, the minus sign must be removed and the first letter of the second word must be capitalized.

To convert to backgroundColor.

(3) For the flaot attribute of CSS, CSS float is used for non-IE browsers and styleFloat for IE browsers due to browser compatibility issues. To

Make sure all browsers are compatible. You can write style.css Float | box. style. styleFloat.

The above only describes how to obtain the CSS style. In addition to obtaining the CSS style, you can also assign values to it:

 

Var box = document. getElementById ("box"); alert (box. style); // return: object CSSStyleDeclaration indicates the style object box. style. color = "# FF0000"; // assign the following value to the color attribute again: # FF0000 (red) // assign the value to the float attribute again: nonebox.style.css Float! = "Undefined "? Box.style.css Float = "none": box. style. styleFloat = "none ";

 

Effect before assignment:
Effect after assignment:

The style attribute can only operate and set the CSS style in the row. For the other two forms: Embedded style<Script type = "text/javascript"> window. onload = function () {}</script>

Div Area

 

First, check the following code:

 

// Obtain the specified Element Node var box = document. getElementById ("box"); // Add addClass (box, "box1") to the class attribute in the div; addClass (box, "box2"); addClass (box, "box3"); // determines whether the classfunction hasClass (element, cName) {return element exists. className. match (new RegExp ("(\ s | ^)" + cName + "(\ s | $)") ;}; // if it does not exist, add a classfunction addClass (element, cName) {if (! HasClass (element, cName) {element. className + = "" + cName ;}; // if yes, delete a classfunction removeClass (element, cName) {if (hasClass (element, cName) {element. className = element. className. replace (new RegExp ("(\ s | ^)" + cName + "(\ s | $ )"),"");}};

Effect before adding:

Effect after adding:

 

 

Let's test the following code:

 

<Script type = "text/javascript"> window. onload = function () {}</script> div Region

The following is the JS Code:

 

// Obtain the specified Element Node var box = document. getElementById ("box"); // Delete the specified classremoveClass (box, "box2"); // determine whether the classfunction hasClass (element, cName) {return element exists. className. match (new RegExp ("(\ s | ^)" + cName + "(\ s | $)") ;}; // if it does not exist, add a classfunction addClass (element, cName) {if (! HasClass (element, cName) {element. className + = "" + cName ;}; // if yes, delete a classfunction removeClass (element, cName) {if (hasClass (element, cName) {element. className = element. className. replace (new RegExp ("(\ s | ^)" + cName + "(\ s | $ )"),"");}};

 

Effect before adding:

Effect after adding: