There are three main ways to modify element styles with JavaScript: First, directly set the in-line style through the element.style attribute, such as document.getElementById('myDiv').style.backgroundColor = 'red', suitable for simple and temporary modification; second, add, delete or switch class name control styles through classList, such as element.classList.add('highlight'), which is more flexible and convenient to maintain; third, dynamically create style tag insertion pages, such as creating and adding style elements containing styles, which are suitable for a large number of dynamic style controls. Pay attention to the use of camel, priority issues and style conflicts in naming.

It is actually quite simple to directly modify the CSS of an element and use JavaScript. The key is to get that element through JS and then manipulate its style attribute or class name.

Use the style attribute to change the style directly

The most direct way is to use element.style to set the style. For example, if you want to change the background color of a div, you can write it like this:

 document.getElementById('myDiv').style.backgroundColor = 'red';

This method is suitable for temporary addition of styles, debugging or making some simple animations. But a few things to note:

• The writing is camel-like, such as backgroundColor instead of background-color
• Set inline style, with high priority, and it is easy to overwrite the rules in CSS files.
• If there are many styles, the code will be messy and it will be troublesome to maintain.

Therefore, it is generally recommended to use this method only when dynamic calculation is required.

More flexible control of styles through class

A better approach is to control the style by adding, deleting, or switching class names. For example, you first define a highlight class in CSS:

 .highlight {
  background-color: yellow;
  font-weight: bold;
}

Then operate the class name in JS:

 const element = document.getElementById('myText');
element.classList.add('highlight'); // Add class element.classList.remove('highlight'); // Remove class element.classList.toggle('highlight'); // Switch class

The advantage of this method is to separate styles and logic, CSS tube styles and JS tube behaviors, have clearer structures and easier to reuse.

Pay attention to priority and style conflicts

Sometimes you will find that JS is styled but not effective, which may be a priority issue. For example, if you set the color with style.backgroundColor , but the browser developer tool displays that it is overwritten by other CSS rules, you need to check whether other styles have higher priority.

There are several solutions:

• Use !important (abuse is not recommended)
• Change to modify the class name and let CSS handle the priority
• Check for any spelling errors or missed selectors

For example, if you use .style.display = 'none' , it may be because other CSSs force display to be set, and it will be more reliable to switch to class control.

Dynamically generate style sheets (advanced usage)

If you want to control the styles dynamically in the project, you can also consider creating a <style> tag insert page, or modifying CSS variables. for example:

 const style = document.createElement('style');
style.textContent = `
  .custom-style {
    color: blue;
    font-size: 20px;
  }
`;
document.head.appendChild(style);

Then it can be used like a normal class. This method is suitable for use in plug-ins or component libraries and is not commonly used in daily development.

Basically that's it. Changing the style is not complicated, but it is easy to get stuck in details, especially in terms of priority and naming format. Just pay more attention.

The above is the detailed content of How to Change the CSS of an Element Using JavaScript. For more information, please follow other related articles on the PHP Chinese website!