To change the CSS style of an element, you can do it by modifying the style attribute or switching the CSS class. 1. To modify the style property, you can set a single style with element.style, such as myElement.style.color = 'red'; Multiple styles can be set in batches by Object.assign. Pay attention to using camel name and the in-line style has high priority. 2. It is recommended to use classList to add, remove or switch CSS classes, such as myElement.classList.add('highlight'), for easy maintenance and reuse. 3. To get the current style, you need to use window.getComputedStyle() to read the actual calculated value, such as console.log(styles.backgroundColor). You cannot use element.style to get the external style directly.

To change the CSS style of an element, using JavaScript is a very straightforward way. You can do this by modifying the element's style attribute or switching the CSS class.

1. Modify the style attribute directly

The easiest way is to set the style through element.style . This method is suitable for modifying a specific style attribute at one time.

 const myElement = document.getElementById('my-element');
myElement.style.color = 'red';
myElement.style.fontSize = '20px';

What should be noted is:

• Attribute names should be named by camel (for example, fontSize instead of font-size )
• The modified style is inline style, with a high priority and may overwrite rules in external CSS files.

If you need to change multiple styles at once, you can write this:

 Object.assign(myElement.style, {
  color: 'blue',
  fontSize: '24px',
  backgroundColor: '#f0f0f0'
});

2. Add or remove CSS classes

It is more recommended to define the class style in CSS in advance, and then add or remove these classes through JavaScript. This is easier to maintain and more in line with the principle of separation of concerns.

For example, your CSS might look like this:

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

Then use JS to switch this class:

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

The benefits of this approach are:

• Easy to unified management style
• Not prone to errors, especially when dealing with multiple styles
• More readable and reusable

3. Get the current style value

Sometimes you want to read the current style value of an element, so you cannot use element.style directly, because it will only return the value of the style in the line. You should use window.getComputedStyle() :

 const myElement = document.getElementById('my-element');
const styles = window.getComputedStyle(myElement);
console.log(styles.backgroundColor); // Output the actual calculated value of the background color

This is especially useful when you need to make judgments based on the current style.

Basically that's it. Not complicated but it is easy to ignore some details, such as attribute name format and priority issues.

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!