If this DOM element has no style, it is not operational. 2. We can also write DOM elements directly into HTML with JS dynamically.
We'll talk about these two applications today in this chapter.
(i) Operation of existing DOM elements in HTML.
As I said above, the operation of existing DOM elements is nothing more than the manipulation of styles. So we need to get the style of this DOM element first. Before you talk about getting the style of a DOM element. First of all, the style of the DOM element is linked. There are three kinds.
One is to write styles directly in HTML documents such as
<div style= "Width:300px;height:200px;background: #000;" ></div>.
The second is to insert a style tag in the header of the HTML document for example
<style>
#dom {width:300px;height:200px;background: #000;}
</style>
The third is our commonly used link way for example
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
These three kinds of use JS to manipulate its style is not the same way
We say that the first type of link style operation, because it is the most commonly used, but also the most convenient.
The second type of link into the style operation trouble.
The third type of link style operation trouble not to say, and can not directly modify the style, want to modify the words must also use the first method, that is to see can not touch
The first way to link styles
Example <div id= "Dom" style= "Width:300px;height:200px;background: #000; margin-top:10px;" ></div>
To get its height attribute, the first of course is to get the DOM element, using the methods in the previous chapters
var a = document.getElementById ("Dom");
To get its height attribute, it's very simple.
var h = a.style.height;
And so on, get the width, get the background color
var w = a.style.width;
var bg = a.style.background;
Note that the outer margin attribute is margin-top;
To get this can't write directly
var mt = A.style.margin-top;
To use the camel described in JQ.
var mt = A.style.margintop;
Getting it is of course of no use, and we have to be able to modify it and make it easy to modify. For example, we're going to change the height to 100, it's simple, just one sentence.
A.style.height = "100px";
The other and so on, I don't say much;
The second way to link styles
<style>
#dom {width:300px;height:200px;background: #000; margin-top:10px;}
</style>
This operation requires a separate browser. Because IE and FF have different access to this code, such as the way to get a height is
var domcss = document.stylesheets[0].cssrules| | Document.stylesheets[0].rules;
var a = Domcss[0].style.height;
That's the thing to change.
Domcss[0].style.height = "100px";
And I don't want to explain why it's written like this. Everyone interested in their own to check;
The third way to link styles
<link rel= "stylesheet" type= "Text/css" href= "Css.css"/>
This operation also requires a separate browser.
Getting words is generally a function of writing a function like this
function Currentstyle (Element) {
return Element.currentstyle | | Document.defaultView.getComputedStyle (element, NULL);
}
If we have the height attribute in that css.css file,
Get method is var a = Currentstyle ("Dom"). Height;
Cannot be modified directly using the method here, only the first method can be used to modify
And I don't want to explain why it's written like this. Everyone interested in their own to check;
(ii) Create DOM elements dynamically with JS.
In fact, this is very simple is a few JS methods, but like building a house as a step by step, such as I want to create a DOM element:
<div id= "Dom" style= "Width:100px;height:100px;background: #000; margin-top:10px;" ></div>
The first step is to create a div node. var newobj = document.createelement ("div");
The second step is to add an id attribute to this section, and the property name is Dom. Newobj.setattribute ("id", "dom");
The third step is to add attributes to this node there are two kinds of side, one is that we talked about the modified style is such newobj.style.width = "100px"; there is another way to use the second step Newobj.setattribute ("width" , "100px"), other properties, etc.
The fourth step is to put this node into the HTML document, the method is this document.body.appendChild (newobj) This sentence means so. Document.body is to get the BODY element
, AppendChild (newobj) is adding a child element to this BODY element is the node that we created.
If you want to remove this node it is so Document.body.removeChild (newobj);
(This can be replaced by the element you want to add a child element to that, for example, I want to add a node to this element with ID con.) we write document.getElementById ("con"). AppendChild (newobj))
It's done. JS has a lot of similar methods with AppendChild. Use and this is the same as everyone interested in Baidu can go. So I do not say here, are not very common.
Ok this chapter is here, the next chapter begins to teach you to write some effect.
