Javascript Analysis of DOM applications (III)

If the DOM element does not have a style, the operation will not be performed. 2. We can also use JS to dynamically write DOM elements to html.
Today, we will talk about these two applications.
(1) operate on existing DOM elements in html.
As I mentioned above, operations on existing DOM elements are nothing more than operations on styles. Therefore, we must first obtain the style of the DOM element. Before getting the style of the DOM element. First, let's talk about the style link of DOM elements. There are three types.

First, write styles directly in html documents, for example
<Div style = "width: 300px; height: 200px; background: #000;"> </div>.

Second, insert a style label in the html document header, for example
<Style>
# Dom {width: 300px; height: 200px; background: #000 ;}
</Style>

Third, we often use the chain-in method, such
<Link rel = "stylesheet" type = "text/css" href = "css.css"/>

These three methods of operating its style with JS are not the same
We will focus on the first chain-in style operation, because it is the most common and convenient.
The second method is troublesome.
The third type of link-to-style operations can not be avoided, and the style cannot be directly modified. If you want to modify the style, you must use the first method.

Method 1
Example <div id = "dom" style = "width: 300px; height: 200px; background: #000; margin-top: 10px;"> </div>
To get its height attribute, first of all, it is to get the DOM element. Use the methods in the previous chapters.
Var a = document. getElementById ("dom ");
It's easy to get its height attribute.
Var h = a. style. height;
Similarly, get the width and the background color.
Var w = a. style. width;
Var bg = a. style. background;
Note that the margin attribute is margin-top;
You cannot write this file directly.
Var mt = a. style. margin-top;
Use the camel method mentioned in JQ
Var mt = a. style. marginTop;

It is of course useless to obtain it. We can modify it easily. For example, if we want to change its height to 100, it's very simple.
A. style. height = "100px ";
I will not talk about other things;


Method 2
<Style>
# Dom {width: 300px; height: 200px; background: #000; margin-top: 10px ;}
</Style>
This operation requires a different browser. Because IE and FF are different for the obtained Code, for example, the method to obtain the height is
Var domcss = document.stylesheets%0%.css Rules | document. styleSheets [0]. rules;
Var a = domcss [0]. style. height;
The modification is like this.
Domcss [0]. style. height = "100px ";
I also don't want to explain why it is written like this. Check if you are interested;

Method 3
<Link rel = "stylesheet" type = "text/css" href = "css.css"/>
This operation also needs to be differentiated from the browser.
Generally, a function is written. The function is like this.
Function CurrentStyle (element ){
Return element. currentStyle | document. defaultView. getComputedStyle (element, null );
}
For example, our css.css file contains the height attribute.
Obtain var a = CurrentStyle ("dom"). height;
The method here cannot be used for direct modification. You can only use the first method for modification.
I also don't want to explain why it is written like this. Check if you are interested;

(2) Use JS to dynamically create DOM elements.
In fact, this is just a few JS methods, but we need to build a house step by step. For example, I want to create a DOM element like this:
<Div id = "dom" style = "width: 100px; height: 100px; background: #000; margin-top: 10px;"> </div>

Step 1: Create a div node. Var newobj = document. createElement ("div ");

Step 2: add an id attribute to this section and the attribute name is dom. Newobj. setAttribute ("id", "dom ");

Step 3: Add attributes to the node. Here there are two ways. One is that the modified style we mentioned earlier is newobj. style. width = "100px"; there is also the method newobj used in step 2. setAttribute ("width", "100px"), other attributes, and so on

Step 4: place the node in the html document. The method is document. body. appendChild (newobj. Document. body: obtains the body element.
AppendChild (newobj) is the node we created by adding a child element to the body element.


If you want to remove this node, it is like document. body. removeChild (newobj );
(This can be changed to the element you want to add the child element to. For example, if I want to add a node to the element whose id is con, We will write the document. getElementById ("con "). appendChild (newobj ))

This is even done. JS has many methods similar to appendChild. The usage is the same as this. If you are interested, go to Baidu. So I will not talk about it here, and it is not very common.

Well, this chapter is here. At the beginning of the next chapter, I will start to teach you how to write some results.