How to change css in js

JavaScript (JS for short) is a lightweight scripting language that is often used to process events on web pages and create dynamic effects and interactions. CSS (Cascading Style Sheets) is a language used to design the appearance and layout of web pages. JavaScript achieves dynamic effects on web pages by dynamically changing CSS properties. The most commonly used one is to change CSS through JS.

On a web page, CSS styles are usually defined in a CSS file and then referenced by a series of HTML elements. JavaScript can obtain references to these elements and then change their CSS properties. For example, to change the background color of a certain element div in a web page, you can use the following code:

var elem = document.getElementById("myDiv");
elem.style.backgroundColor = "blue";

This code first uses the document.getElementById() method to get the element with the id myDiv, and then uses the style attribute Get the CSS style object of the element, and finally change the background color of the element by setting the backgroundColor property.

In addition to using JavaScript to change CSS properties, you can also change element styles by adding or removing CSS classes. A CSS class refers to a collection of CSS styles that can be applied to multiple elements at the same time. For example, there are multiple buttons in a web page, and their styles are defined by the .button class. At this time, you can add or remove this class through JavaScript code to change the styles of all buttons. The specific implementation is as follows:

var btn = document.getElementById("myBtn");
btn.classList.add("button-style"); // 添加button-style类
btn.classList.remove("button-style"); // 移除button-style类

In this code, first get the button element with the id myBtn, and then get the CSS class list contained in the element through the classList attribute. Then, you can use the add() method to add CSS classes and the remove() method to remove CSS classes.

In addition to the above two methods, you can also dynamically add CSS styles to the page by creating a new style sheet. This method is usually used when a large number of dynamic styles need to be added. For example, you can create a new style sheet and add some dynamic styles to it through the following code:

var styleElem = document.createElement("style");
styleElem.type = "text/css";
styleElem.innerHTML = ".myDiv {background-color: blue; color: white;}";
document.head.appendChild(styleElem);

In this code, first create a new style tag and set its type attribute to text/css . Then, use the innerHTML attribute to add a .myDiv class to the style sheet, which contains settings for the background color and font color. Finally, use the appendChild() method to add the new style sheet to the page head tag.

In general, JavaScript is very flexible in operating CSS styles and can achieve various dynamic effects and interactions. However, excessive use of dynamic CSS styles may have a negative impact on web page performance. For some basic static styles, it is best to use static CSS files.

The above is the detailed content of How to change css in js. For more information, please follow other related articles on the PHP Chinese website!