Skip to content
10x Tech Infinity

Changing Element Styles with JavaScript: A Simple Guide

One of the most powerful features of JavaScript is its ability to dynamically change the appearance of HTML elements. This allows you to create interactive and responsive web pages. Let’s explore how to modify element styles using JavaScript.

Our Starting HTML

First, let’s look at the HTML we’ll be working with:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CHANGE STYLE OF ELEMENT</title>
    <script src="./4DOM-CHANGE-STYLE.JS" defer></script>
  </head>
  <body>
    <h2 id="main-id" class="main-class">Manage your tasks</h2>
  </body>
</html>

This HTML creates an <h2> element that we’ll style using JavaScript.

Changing Styles with JavaScript

To change the style of an element, we use the style object, which gives us access to all CSS properties of that element. Here’s how we can modify multiple styles:

let heading = document.querySelector("h2");
heading.style.backgroundColor = "orange";
heading.style.color = "#424242";
heading.style.textAlign = "center";

Let’s break this down:

  1. First, we select the <h2> element using querySelector.
  2. Then, we use the style object to access and modify CSS properties:
  3. backgroundColor sets the background color to orange.
  4. color sets the text color to a dark gray (#424242).
  5. textAlign centers the text within the element.

Important Points to Remember

  1. Camel Case: In JavaScript, CSS properties are written in camelCase. For example, background-color becomes backgroundColor.
  2. String Values: All values are set as strings. For colors, you can use named colors, hex codes, RGB, or HSL values.
  3. Inline Styles: These changes create inline styles on the element, which have high specificity and may override existing CSS rules.
  4. Temporary Changes: Styles applied this way are not permanent and will be lost if the page is refreshed. For permanent changes, consider modifying your CSS file.

Practical Uses

  • Creating hover effects
  • Showing or hiding elements based on user interactions
  • Animating elements
  • Applying styles based on data or user preferences

Example: Creating a Toggle Function

Let’s create a function that toggles the heading’s style:

let heading = document.querySelector("h2");
let isStyled = false;


function toggleStyle() {
  if (isStyled) {
    heading.style.backgroundColor = "";
    heading.style.color = "";
    heading.style.textAlign = "";
  } else {
    heading.style.backgroundColor = "orange";
    heading.style.color = "#424242";
    heading.style.textAlign = "center";
  }
  isStyled = !isStyled;
}


// You can call this function in response to events, like button clicks

This function allows you to switch between styled and unstyled states.

Conclusion

Changing element styles with JavaScript opens up a world of possibilities for creating dynamic and interactive web pages. Remember to use this power judiciously and consider using CSS while it’s great for creating interactive effects, major styling should generally be handled in your CSS files for better maintainability.

As you become more comfortable with manipulating styles, you can create more complex interactions and animations, enhancing the user experience of your web applications.

Happy Learning!