Css-dom of JavaScript Learning notes

HTML is responsible for the structure layer, and the structure layer of the Web page is built by markup language such as HTML or XHTML.

CSS is responsible for the presentation layer, describing how the page content should be rendered.

JavaScript is responsible for the behavior layer and is responsible for how the content should respond to events.

can use CSS to solve the problem do not use JS to achieve, the content can be implemented with CSS do not use in HTML, each should be strictly responsible for their own fields.

Each element in the document is an object (all objects)

Each element node of the document has an attribute Style,style contains the style of the element, and the query property returns an object instead of a simple string, and the style is placed in the property of the Style object.

Because each property contains more than one style, it is better to return an object than to manipulate the property!

Format: element. Style.property (attribute style)

If you want to get the style of a label:

1. Get this element out of the document.
2. Use Element.style.property to get the style (CSS style name between-to use the Hump name method to express, otherwise JS can not parse. Example: font-family-->fontfamily)

one of the great limitations of the style propertyis that style can only return inline styles, which means that only the CSS style is added to the tag in order to query that information with the DOM style property.

The. css files from outside are no longer retrievable with Dom style.

PS: color: in the CSS color in English name to name the color, such as red, in JS will show red, if using #000000 similar usage, JS will display as RGB format

To set properties for inline styles:

The Style property is not only readable, but also writable. You can update the style by using the Style property;

Format: element. style.property (the attribute style to be changed) = "Value" (quotation marks must be added);

Note: only in the case of CSS inconvenient, you can use the DOM to make some small enhancements to the style of the document, but the CSS is always the main body;

JS is especially good at repetitive tasks, with a while or for loop to easily traverse a long list

Change the style in the. css file: (Ensure that the presentation layer and the behavior layer of the Web page are separated thoroughly)

Instead of using the DOM to change the style of an element directly, update the class property of the element with JavaScript code

Tip: write a style sheet with a class attribute in the CSS style table and use the SetAttribute method to change the value of the class attribute in the tag to get a new style.

ClassName Property: There is an easier way to update class is to use the ClassName property (which is a readable, writable property), as long as the element node has this attribute

Gets the class value of the element, in the format: element. className

Use the ClassName property and the assignment operator to set the class property value of an element

Format: element. ClassName = "ClassName"

Use this action to replace the value of the original class with the new class value.

But one problem is that sometimes we don't want to replace this class value, we just want to append a class value after the value of the original class.

You can use the string concatenation method: element. className + = "ClassName" NOTE: A space is required in front of the ClassName

Recommended steps:

1. Checks if the value of the ClassName property is empty
2. If yes, directly assign the value of class to ClassName
3. If not, append a space and a new class setting value to the classname.

The abstraction of a function can make the function more widely used, by giving the argument the way it is called, and when found to be able to abstract a function, it should be done immediately!!!!!!

Transferred from: http://www.cnblogs.com/Gary-Guoweihan/p/4774673.html

Css-dom of JavaScript Learning notes