Easy Learning JavaScript 24: DOM programming learning action CSS style (i)

CSS styles as an aid to HTML can enhance the appearance of the page. I learned DOM to manipulate HTML, so we have to learn dom to manipulate CSS.

The method of the style. When learning CSS, we already know that there are three cases of CSS inserting into HTML documents: inline, inline, and out-of-the-line

(This is our most used). Here's how to operate these three scenarios:

One-action inline

To write an HTML document first:

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Any HTML element tag will have a common property: style, which returns the Cssstyledeclaration object. The following are the most common
How the JavaScript Dom accesses CSS inline styles.
CSS properties and JavaScript calls
Instance:
<span style= "FONT-SIZE:18PX;" >//gets the element node where the inline style is located var box=document.getelementbyid ("box"); alert (box.style);//Return: Object Cssstyledeclaration represents the Style object alert (box.style.color);//return: RDB (255,255,255) indicates white, different browsers will have different results alert ( Box.style.backgroundColor);//return: RDB (0,255,0) indicates green, different browsers will have different results alert (box.style.cssfloat| | Box.style.styleFloat);//Return:right</span>
The way we call from the above JavaScript we need to note:
(1) If it is a generic CSS property, it can be called with its property name. such as: Style.color.
(2) If a CSS property such as Background-color is called, it must be used to remove the minus sign and the first letter of the second word should be capitalized, so
To be converted into backgroundcolor.
(3) If the Flaot property of CSS is due to browser compatibility issues, non-IE browsers use Cssfloat,ie browser using Stylefloat. In order to
Make sure all browsers are compatible and can be written as: style.cssfloat| | Box.style.styleFloat such a form.
This is just a description of the way to get it, so in addition to getting a CSS style, you can also assign a value operation:
<span style= "FONT-SIZE:18PX;" >var Box=document.getelementbyid ("box"); alert (box.style);//Return: Object cssstyledeclaration indicates style object Box.style.color = "#FF0000";//re-assign a value to the Color property: #FF0000 (red)//re-assign the float property to: nonebox.style.cssfloat!= "undefined"? box.style.cssfloat= " None ": box.style.stylefloat=" None ";</span>
Effect before assignment:
The effect after assignment:
The Style property can only manipulate and set CSS styles within the row for two other forms: inline <style> and out-of-line <link> are not available
to the. There is also a style to get a single value of CSS style, but for composite values of CSS style information, you need to be calculated to obtain.
Two get CSS styles that match values
The Window object in the DOM provides the getComputedStyle () method, which accepts two parameters, a style element that needs to be evaluated, and a second pseudo-
Class (similar to: hover), if there is no pseudo-class, fill in the null. However, there will be a compatibility problem, IE does not support this method, it has a
A similar property can be used with the Currentstyle property.
Instance:
<span style= "FONT-SIZE:18PX;" >var Box=document.getelementbyid ("box"), or//for the style object to do a compatible Var style=window.getcomputedstyle? window.getComputedStyle (box,null): null| | Box.currentstyle;alert (style);//Return: Object Cssstyledeclaration represents the Style object alert (style.color);//return: RDB (255,255,255) No, The same browser will have different results alert (style.border);//different browsers return different results alert (style.fontfamily);//Calculate display composite style values </span>
As can be seen from the above results: Some CSS styles have different results in each browser, such as the border property is a synthetic property, so it
In Google Chrome and 2345 browsers will show that Firefox is empty, ie for undefined. The so-called composite attribute is the so-called shorthand form of XHTML, so
Dom in the acquisition of CSS style, it is best to use the full compatibility best, such as: Border-top-color.
We use the getComputedStyle () method and the Currentstyle property method under the WinDOS object only to get unable to set.
Three-inline with the class attribute
Using the Style property allows you to set the CSS style within the line, while calling through the ID and class is the most common method, but the ID is the only one that is determined in the entire HTML
, once changed, can have disastrous consequences, so we generally do not rewrite the value of the id attribute.
In the process of manipulating CSS styles, we generally achieve the effect by rewriting the value of the class attribute. Before learning CSS selectors, the class selection
A selector can be a multi-class selector, where a class value may contain a list of words separated by spaces, then if we want to add a
class, you can use this method.
When adding classname, we would like to add more than one class is no method, the next one will overwrite the previous one, so must come
Write three functions:
(1) Determine if this class exists
<span style= "FONT-SIZE:18PX;" >function Hasclass (element,cname) {       return Element.className.match (New RegExp ("(\\s|^)" +cname+ "(\\s|$)");}; </span></span>
(2) If there is no class to specify, add this class
<span style= "FONT-SIZE:18PX;" >function addclass (element,cname) {       if (!hasclass (Element,cname)) {               element.classname+= "" +cname;       }}; </span>
(3) If there is a class specified to be deleted, delete it
<span style= "FONT-SIZE:18PX;" >function Removeclass (element,cname) {       if (hasclass (Element,cname)) {        element.classname= Element.className.replace (New RegExp ("(\\s|^)" +cname+ "(\\s|$)"), "");       }; </span>
Next we examine these three functions, first write the HTML document to manipulate the class selector:
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Check the following code first:
<span style= "FONT-SIZE:18PX;" >//gets 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");//Determine if there is a classfunction hasclass (element,cname) {        return Element.className.match (new RegExp ("(\\s|^)" +cname+ "(\\s|$)");};/ /If not present, add a classfunction addclass (element,cname) {        if (!hasclass (Element,cname)) {       element.classname+= "" +cname;        }};/ /If present, delete a classfunction removeclass (element,cname) {        if (hasclass (Element,cname)) {       element.classname= Element.className.replace (New RegExp ("(\\s|^)" +cname+ "(\\s|$)"), "");        }; </span>
before adding the effect:

The effect after adding:


Check the following code again, or the HTML document code First:
<span style= "FONT-SIZE:18PX;" ><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The following is the JS code:
Gets the specified element node var box=document.getelementbyid ("box");//delete the specified classremoveclass (box, "Box2");//Determine if there is a classfunction Hasclass (element,cname) {        return Element.className.match (New RegExp ("(\\s|^)" +cname+ "(\\s|$)"));};/ /If not present, add a classfunction addclass (element,cname) {        if (!hasclass (Element,cname)) {        element.classname+= "" +cname;        }};/ /If present, delete a classfunction removeclass (element,cname) {        if (hasclass (Element,cname)) {     element.classname= Element.className.replace (New RegExp ("(\\s|^)" +cname+ "(\\s|$)"), "");        };
before adding the effect:

The effect after adding:





Easy Learning JavaScript 24: DOM programming learning action CSS style (i)