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中文网(php.cn)</title>
</head>
<body>
  <h1 id="id1">标题</h1>
  <button type="button" onclick="document.getElementById('id1').style.color='blue'">点击改变</button>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function setSize() { document.getElementById("t2").style.fontSize = "30px"; } function setColor() { document.getElementById("t2").style.color = "red"; } function setbgColor() { document.getElementById("t2").style.backgroundColor = "blue"; } function setBd() { document.getElementById("t2").style.border = "3px solid #FA8072"; } </script> </head> <body> <div id="t2">欢迎光临！</div> <p><button onclick="setSize()">大小</button> <button onclick="setColor()">颜色</button> <button onclick="setbgColor()">背景</button> <button onclick="setBd()">边框</button> </p> </body> </html>

submit Reset Code

Automatic operation

JavaScript HTML DOM - changing CSS

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]