The Complete Guide to Styling Elements with JavaScript

Isaac
Posted by By Isaac 3 months Ago 4 Min Read

Styling HTML elements is an essential aspect of web development, and CSS is the primary tool used to style web pages. However, JavaScript can also be used to style elements dynamically, providing developers with more flexibility and control over the look and feel of their web pages. In this article, we’ll provide a complete guide to styling elements with JavaScript, along with example code to help you get started.

Modifying Style Properties with JavaScript

The easiest way to style elements with JavaScript is to modify their style properties directly. Each element in the DOM has a style property, which is an object that contains all the style properties for that element. You can modify these properties using the style object, as shown in the example below:

const element = document.querySelector('.my-element');

element.style.color = 'red';
element.style.backgroundColor = 'blue';

In this example, we select an element with the class my-element using the querySelector() method. We then modify its color and background-color properties by setting them to 'red' and 'blue', respectively, using the style object.

Adding and Removing CSS Classes with JavaScript

Another way to style elements with JavaScript is to add or remove CSS classes dynamically. This is useful when you want to apply a set of styles to multiple elements, or when you want to change the styles of an element based on user interaction or some other event. Here’s an example of how to add and remove CSS classes with JavaScript:

const element = document.querySelector('.my-element');

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

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

In this example, we select an element with the class my-element using the querySelector() method. We then add a CSS class called highlight to the element using the classList.add() method. Finally, we remove the highlight class from the element using the classList.remove() method.

Setting and Getting Element Attributes with JavaScript

Another way to style elements with JavaScript is to modify their attributes. For example, you can set the src attribute of an image element to change the image displayed, or set the href attribute of a link element to change the target of the link. Here’s an example of how to set and get element attributes with JavaScript:

const image = document.querySelector('.my-image');

// Set the src attribute
image.setAttribute('src', 'new-image.jpg');

// Get the src attribute
const src = image.getAttribute('src');

In this example, we select an image element with the class my-image using the querySelector() method. We then set the src attribute of the image to 'new-image.jpg' using the setAttribute() method. Finally, we get the value of the src attribute using the getAttribute() method and store it in a variable called src.

Example Code

Here are some additional examples of how to style elements with JavaScript:

// Change the font size of all paragraphs on the page
const paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph) => {
  paragraph.style.fontSize = '20px';
});

// Toggle a CSS class on and off when a button is clicked
const button = document.querySelector('button');
const element = document.querySelector('.my-element');

button.addEventListener('click', () => {
  element.classList.toggle('highlight');
});

Conclusion

Styling elements with JavaScript is a powerful technique that provides developers with more control over the look and feel of their web pages. By modifying style properties directly, adding and removing CSS classes, and setting and getting element attributes, you can create dynamic, engaging web pages that respond to user interaction and other events. With the examples and techniques presented in this article, you should have everything you need to start styling elements with JavaScript.

Tags: