In JavaScript, you can manipulate CSS styles of HTML elements using the DOM (Document Object Model). The DOM provides various methods and properties to access and modify the CSS styles associated with the HTML elements.

To change the CSS styles of an element, you can use the `style` property of the DOM element. The `style` property is an object that represents the inline styles of the element. You can directly set or modify CSS properties on this object.

Here are some common ways to manipulate CSS styles in JavaScript using the DOM:

1. **Changing Individual CSS Properties**:

You can change individual CSS properties using the `style` property.

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

// Change individual CSS properties
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = '#f0f0f0';

2. **Changing Multiple CSS Properties**:

You can set multiple CSS properties at once using the `style` property.

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

// Set multiple CSS properties
element.style.cssText = 'color: red; font-size: 20px; background-color: #f0f0f0;';

3. **Adding and Removing CSS Classes**:

You can add or remove CSS classes to change multiple CSS properties at once.

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

// Add a CSS class
element.classList.add('myClass');

// Remove a CSS class
element.classList.remove('otherClass');

4. **Toggle CSS Classes**:

You can toggle the presence of a CSS class on an element.

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

// Toggle a CSS class
element.classList.toggle('myClass');

5. **Inline Styles vs. CSS Classes**:

Changing styles directly through the `style` property applies inline styles, which have the highest specificity. In most cases, it's better to use CSS classes to manage styles for better separation of concerns and maintainability.

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

// Apply styles using CSS classes
element.classList.add('highlighted');
element.classList.remove('otherStyle');

Remember that using JavaScript to modify CSS styles should be used judiciously and preferably for dynamic changes, animations, or user interactions. For static styles or layout, it's generally better to use CSS stylesheets.

Overall, using the DOM to manipulate CSS styles in JavaScript gives you the flexibility to dynamically change the appearance and behavior of HTML elements, making your web applications more interactive and responsive.

About the Author

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc