There are three main methods to modify the CSS style of an element through JavaScript: 1. Use the style attribute to directly set the inline style, such as element.style.color = 'red'; 2. Add, remove or switch CSS classes through classList to apply styles; 3. Use functions to set multiple styles in batches to keep the code concise. The first method is suitable for simple and fast modification but can easily lead to code confusion. The second method is more conducive to maintenance and is recommended to use it first. The third method is suitable for situations where multiple styles need to be modified at the same time, and code reusability is improved through encapsulation functions.

You can change an element's CSS styles with JavaScript by accessing the element and then modifying its style property or using classes. Here's how to do it effectively.

1. Using the style Property

The most direct way is to select the element and use the .style property to apply inline styles.

For example:

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

A few things to note:

• Property names are in camelCase, not hyphenated like in CSS (eg, backgroundColor instead of background-color )
• This method applies styles directly as inline styles, which can override external CSS rules unless they use !important
• It's good for quick one-off changes but can get messy if you're applying multiple styles

2. Adding or Removing CSS Classes

A cleaner approach is to define styles in a CSS class and toggle that class using JavaScript.

Example CSS:

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

JavaScript usage:

 const element = document.getElementById('myElement');

// Add the class
element.classList.add('highlight');

// Remove the class
element.classList.remove('highlight');

// Toggle the class (add if not present, remove if it is)
element.classList.toggle('highlight');

This keeps your styling logic in CSS and your JavaScript focused on behavior, making code easier to maintain.

3. Changing Multiple Styles at Once

If you need to update several styles together, you can either set them one by one via .style , or create a function to apply them all:

 function applyStyles(el, styles) {
  Object.keys(styles).forEach(prop => {
    el.style[prop] = styles[prop];
  });
}

const element = document.getElementById('myElement');
applyStyles(element, {
  color: 'blue',
  fontSize: '24px',
  padding: '10px'
});

This helps keep your code DRY and reusable.

Basically that's it. You can choose a direct operation style or switch classes according to the specific situation, and the latter is more recommended in most cases.

The above is the detailed content of How do you modify an element's CSS styles with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!