Using JavaScript to manipulate CSS

JavaScript can be used to manipulate CSS, which means that you can dynamically change the style and appearance of HTML elements on a web page. Here’s an overview of how to manipulate CSS with JavaScript:

• Accessing CSS Styles

To manipulate CSS styles with JavaScript, you first need to access them. You can access CSS styles using the style property of an HTML element. The style property is an object that contains all of the inline styles for an element.

// Access an element’s style object

var myElement = document.getElementById(“my-element”);

var style = myElement.style;

• Changing CSS Properties

Once you have accessed an element’s style object, you can change its CSS properties by modifying its properties. CSS properties in JavaScript are represented in camel Case rather than kebab-case. For example, the CSS property background-color is represented in JavaScript as background Color.

// Change an element’s background color

var myElement = document.getElementById(“my-element”);

myElement.style.backgroundColor = “red”;

• Adding and Removing CSS Classes

You can also add and remove CSS classes using JavaScript. To do this, you can access an element’s class list using the class List property. The class List property is an object that contains all of the classes for an element. You can add a class using the add() method and remove a class using the remove() method.

// Add and remove a class from an element

var myElement = document.getElementById(“my-element”);

myElement.classList.add(“my-class”);

myElement.classList.remove(“my-other-class”);

• Responding to CSS Animations and Transitions

JavaScript can also be used to respond to CSS animations and transitions. To do this, you can attach event listeners to an element using the addEventListener() method. The animationend and transitionend events are fired when a CSS animation or transition finishes. Here’s an example:

// Add an event listener for an animation or transition

var myElement = document.getElementById(“my-element”);

myElement.addEventListener(“animationend”, function() {

  console.log(“Animation finished!”);

});

myElement.addEventListener(“transitionend”, function() {

  console.log(“Transition finished!”);

});