How to modify css in javascript

In web development, we often need to modify CSS styles through JavaScript and dynamically change element styles in web pages to achieve a better user interaction experience. This article will introduce how JavaScript modifies CSS, including the following aspects:

1. Modify element styles
2. Dynamicly add style sheets
3. Get calculated styles
4. Modify class name

1. Modify element style

To modify the style of an element, we can do it through the style attribute of JavaScript. The style attribute represents the inline style of the element, and the style of the element can be directly modified through this attribute. For example, we can set the background color of a div element to red through the following code:

var divElement = document.getElementById("example");
divElement.style.backgroundColor = "red";

Here, we use the getElementById function to get the div element with the id example, and then use the style attribute to set it background color.

In addition to backgroundColor, we can also set many other styles of elements through the style attribute, such as color, font, padding, etc. The specific syntax format is:

element.style.property = value;

Among them, property is the style Attribute name, value is the attribute value, for example:

divElement.style.color = "blue";
divElement.style.fontSize = "20px";
divElement.style.padding = "10px";

2. Dynamically add a style sheet

Sometimes, we need to dynamically add a new style sheet to the web page to achieve a more flexible style control. At this time, we can use JavaScript's createElement and appendChild functions to dynamically add style sheets.

The specific steps are as follows:

1. Create a link element.

var linkElement = document.createElement("link");

2. Set the rel, type and href attributes of the link element, where:

• The rel attribute indicates the style sheet type, usually set to stylesheet.
• The type attribute indicates the style sheet file type, usually set to text/css.
• The href attribute represents the style sheet file path, which can be a relative path or an absolute path.

linkElement.rel = "stylesheet";
linkElement.type = "text/css";
linkElement.href = "style.css";

3. Add the link element to the head element.

var headElement = document.getElementsByTagName("head")[0];
headElement.appendChild(linkElement);

In this way, the style sheet is successfully added to the web page. It should be noted that before adding a style sheet, we need to ensure that the style sheet file has been loaded. Otherwise, the style may not take effect.

3. Get the calculated style

Sometimes, we need to get the calculated style of an element, that is, the final style after all style rules are applied to the element. For example, if we need to get the calculated background color of a certain div element, we can use JavaScript's getComputedStyle function to achieve this.

The specific operation steps are as follows:

1. Get the element object.

var divElement = document.getElementById("example");

2. Use the getComputedStyle function to get the calculated style.

var computedStyle = window.getComputedStyle(divElement);

3. Get the calculated style attribute value.

var backgroundColor = computedStyle.backgroundColor;

It should be noted here that the getComputedStyle function returns a CSSStyleDeclaration object, which contains all calculated styles of the element. If you want to get the value of a certain attribute, you need to use the corresponding attribute of the object. For example, computedStyle.backgroundColor represents the calculated background color of the element.

4. Modify the class name

Sometimes, we need to change the style of the element by modifying the class name. For example, we need to switch the background color of a div element by clicking a button, which can be achieved by modifying the class attribute of the element.

The specific steps are as follows:

1. Create a button element.

var buttonElement = document.createElement("button");
buttonElement.textContent = "切换背景色";

2. Add a click event handler to the button element.

buttonElement.addEventListener("click", function() {
  var divElement = document.getElementById("example");
  divElement.classList.toggle("highlight");
});

Here, we added a click event handling function, which uses the classList attribute to modify the class attribute of the element. We use the toggle function to switch whether the element contains the highlight class name. If the element does not originally contain the highlight class name, add the class name; otherwise, remove the class name.

3. Add button elements to the web page.

document.body.appendChild(buttonElement);

In this way, you can dynamically switch the background color of the div element by clicking the button.

Summary:

The style control function of JavaScript provides us with a rich web page style control method. By mastering the skills introduced above, we can achieve a more flexible and interactive web page style. Effect. At the same time, style control is also one of the essential skills for Web front-end development. I hope this article can be helpful to readers.

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