Recommended reading: JavaScript Harness Web-dom
Dom is a world Wide Web-standard HTML manipulation that can achieve more control than innerHTML features
Here are the HTML code and CSS code
<!doctype html>
By changing the whole style class of the node, classname the characteristic of the node to achieve dramatic style change.
DOM provides access to element style classes through the ClassName attribute of node properties
Alert (document.getElementById ("Span1"). ClassName);
Change the appearance of an element by changing the name of the CSS style class
Similarly, we can also use onmouseover () and onmouseout () events to control the style of the element here.
<span id= "Span1" class= "Class1" onmouseover= "This.classname= ' class2 '" "onmouseout=" This.classname= ' Class1 ' "" >
Although this effect is generally used to control the CSS, however, here only focus on the application of these tools, we can analogy
CSS style classes have nothing to do with JavaScript classes-they're completely different things
By accessing a single style feature of the node, the style node features a small amount of style changes
The style attribute of a node provides access to a single style attribute
<span id= "Span1" class= "Class1" onmouseover= "This.classname= ' class2 '" "onmouseout=" This.classname= ' Class1 ' "style = "Visibility:hidden" >
Style= "Visibility:hidden" indicates that the element is hidden
Page elements can be dynamically displayed or hidden using the visibility style features of element objects (Display:none/display:block can also be used to hide and display elements)
Dom can create any HTML element at will, including, of course, text paragraphs
Document.createelement () is used to create an HTML tag that is marked with a signature
Document.createelement ("P") creates a P tag
Another: document.createTextNode () is used to create paragraphs of text, arguments are text content
var pelem=document.createelement ("P");//create a P tag
Pelem.appendchild (document.createTextNode ("Hello wearezero!")); /Add child element text to P tag
document.getElementById ("Span1"). AppendChild (Pelem);//Add the P label and its child elements to the Span1 tab
Appendix:
Use the createelement () method of the Document object to create any HTML element
If you want the text content of the new element, you must create a text content child element and attach it to the element
By carefully adding and removing nodes from the DOM tree, the Web page can be disassembled and reorganized at will
JavaScript control page-CSS and Dom Introduction to here, hope to help you!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
