Home >Web Front-end >JS Tutorial >JavaScript controls web pages-CSS and DOM_javascript skills

JavaScript controls web pages-CSS and DOM_javascript skills

WBOYOriginal: 2016-05-16 15:08:231351browse

Recommended reading: JavaScript Controls Web Pages - DOM

DOM is an HTML manipulation method that complies with World Wide Web standards. It can achieve more manipulation functions than innerHTML features

Here are the HTML code and CSS code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span.class1{
background-color:#DDDDDD;
}
span.class2{
background-color:#221717;
}
</style>
</head>
<body>
<span id="span1" class="class1">
Start Game
</span>
<span id="span2" class="class2">
Start Game
</span>
</body>
</html>

The className node attribute achieves dramatic style changes by changing the entire style class of the node

DOM provides access to element style classes through the className attribute of node attributes

alert(document.getElementById(“span1”).className);

Complete the transformation of the appearance of the element by changing the name of the CSS style class

document.getElementById(“span1”).className=”class2”;//将span1的样式换成span2的样式

Similarly, we can also use onmouseover() and onmouseout() events to control the style of elements

<span id="span1" class="class1" onMouseOver="this.className='class2'" onMouseOut="this.className='class1'">

Although this effect is generally controlled with CSS, here we only focus on the application of these tools, and you can just follow the analogy

CSS style classes have absolutely nothing to do with Javascript classes - they are completely different things

By accessing the single style attribute of the node, the style node attribute achieves a small number 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

Web page elements can be dynamically displayed or hidden using the visibility style feature of the element object (display:none/display:block can also hide and display elements)

DOM can create any HTML element at will, including text paragraphs

document.createElement() is used to create an HTML tag, and the parameter is the tag name

document.createElement("p") creates a p tag

Another: document.createTextNode() is used to create text paragraphs, and the parameter is the text content

var pElem=document.createElement(“p”);//Create a P tag

pElem.appendChild(document.createTextNode("Hello WeAreZero!"));//Add sub-element text to the P tag

document.getElementById("span1").appendChild(pElem);//Add the P tag and its sub-elements to the span1 tag

Appendix:

Using the createElement() method of the document object, you can create any HTML element

If you need to add text content to an element, you must create a text content sub-element and append it to the element

By carefully adding and removing nodes in the DOM tree, web pages can be disassembled and reorganized at will

This is the introduction of JavaScript to control web pages-CSS and DOM. I hope it will be helpful to everyone!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Magnifying glass plug-in written based on jquery_jqueryNext article：Magnifying glass plug-in written based on jquery_jquery

See more

JavaScript controls web pages-CSS and DOM_javascript skills

Related articles