JavaScript HTML DOM - changing CSS
There are 4 ways to modify CSS in JavaScript:
Modify node style (inline style);
Change node class or id;
Write new css;
Replace the style sheet in the page.
It is not recommended to use the latter two methods. Almost all functions can be achieved through the first two methods, and the code is clearer and easier to understand.
Modify node style (inline style)
This method has the highest weight. It is written directly on the style attribute of the node. It will override the settings set by other methods. style. The usage is very simple:
var element = document.getElementById("test");
element.style.display = "none" //Let Element hiding
But it should be noted that some CSS style names are composed of several words, such as font-size, background-image, etc., and they are all connected with dashes (-). However, dash means "minus" in JavaScript, so it cannot be used as an attribute name. We need to use "camelCase" to write attribute names, such as fontSize, backgroundImage.
Also note that many styles have units and cannot be given just a number. For example, the units of fontSize include px, em, % (percentage), etc.
Change class, id
id and class are the "hooks" for setting styles. After the change, the browser will automatically update the style of the element.
The method of changing id is similar to that of class, but I personally do not recommend using it this way because id is used to locate elements. It is best not to use it to define the display style of elements, and id is often used as JavaScript Hooks may cause unnecessary errors.
In JavaScript, class is a reserved keyword, so use className as the attribute to access the element class, for example:
.redColor{
color: red;
}
.yellowBack{
background: yellow ;
}
##element.className = "redColor";//Set class
element.className += "yellowBack";//Add class
Change the style of HTML elements, generally please use this Syntax:
document.getElementById(id).style.property=New style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>
<h1 id="id1">標(biāo)題</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">點擊改變</button>
</body>
</html>
