A Guide to Working with CSS Classes and IDs in JavaScript

Isaac
Posted by By Isaac 2 weeks Ago 3 Min Read

Are you looking to create dynamic and responsive web pages using JavaScript? One of the most important skills you’ll need is the ability to work with CSS classes and IDs. By using these techniques, you can modify the styling of your web pages in response to user interaction and other events.

Here’s a guide to working with CSS classes and IDs in JavaScript, including examples of selecting elements, adding and removing classes, setting and getting IDs, and more.

Selecting Elements

Before you can work with CSS classes and IDs in JavaScript, you need to select the elements you want to modify. Here are some ways to select elements based on their class or ID:

// Selecting an element with a specific class
const elementWithClass = document.querySelector('.my-class');

// Selecting all elements with a specific class
const elementsWithClass = document.querySelectorAll('.my-class');

// Selecting an element with a specific ID
const elementWithId = document.querySelector('#my-id');

document.querySelector() selects the first element that matches the given selector, while document.querySelectorAll() selects all elements that match the selector.

Adding and Removing Classes

Once you’ve selected an element, you can add or remove CSS classes using the classList property. Here’s how to add, remove, and toggle classes:

// Adding a class to an element
const element = document.querySelector('.my-element');
element.classList.add('my-class');

// Removing a class from an element
element.classList.remove('my-class');

// Toggling a class on an element
element.classList.toggle('my-class');

classList.add() adds a class to the element, classList.remove() removes a class, and classList.toggle() adds the class if it’s not present or removes it if it is.

Setting and Getting IDs

You can also set and get an element’s ID using the id property:

// Setting an element's ID
const element = document.querySelector('.my-element');
element.id = 'my-id';

// Getting an element's ID
const elementId = element.id;

element.id gets or sets the element’s ID.

Using CSS Classes and IDs to Create Dynamic and Responsive Web Pages

By using CSS classes and IDs in JavaScript, you can create dynamic and responsive web pages that respond to user interaction and other events. Here are some examples:

// Adding a class to an element when a button is clicked
const button = document.querySelector('.my-button');
const element = document.querySelector('.my-element');
button.addEventListener('click', () => {
  element.classList.add('active');
});

// Changing the styling of an element based on its ID
const element = document.querySelector('#my-element');
if (element.offsetWidth > 500) {
  element.classList.add('wide');
}

In the first example, we add the class active to an element when a button is clicked. In the second example, we add the class wide to an element if its width is greater than 500 pixels.

By using CSS classes and IDs in JavaScript, you can make your web pages more dynamic and responsive, creating a better user experience for your visitors.

Tags: