Skip to main content

Style Object in JavaScript DOM (Live Playground)

In this tutorial, we will explore the JavaScript DOM Style Object, which allows you to work with the CSS properties of HTML elements. This will enable you to create dynamic web page designs and user interactions based on user input, events, or other conditions.

Introduction to the Style Object​

The Style Object is a JavaScript object that represents the inline CSS styles of an HTML element. It allows you to access, modify, and remove CSS properties of an element directly through JavaScript.

The Style Object is accessed through the style property of an HTML element:

var element = document.getElementById('exampleElement');
var styleObject = element.style;

Sample Code: Modifying CSS Properties with the Style Object​

Let's say we have the following simple HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Style Object Example</title>
  </head>
  <body>
    <h1 id="mainHeading">Welcome to My Web Page!</h1>
    <button id="changeColorButton">Change Heading Color</button>
  </body>
</html>

We'll now use JavaScript and the Style Object to change the color of the h1 element with the ID mainHeading. First, include a JavaScript <script> tag in your HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Style Object Example</title>
  </head>
  <body>
    <h1 id="mainHeading">Welcome to My Web Page!</h1>
    <button id="changeColorButton">Change Heading Color</button>

    <script>
      // Select the element with the ID "mainHeading"
      var mainHeading = document.getElementById('mainHeading');

      // Modify the color property of the Style Object
      mainHeading.style.color = 'blue';
    </script>
  </body>
</html>

After running this code, the h1 element's text color will change to blue.

Live Playground, Try it Yourself

Accessing CSS Property Values​

You can access the current value of a specific CSS property through the Style Object:

console.log(mainHeading.style.color); // Will output "blue"

Keep in mind that the Style Object only accesses inline styles applied directly to the element, not styles inherited from a CSS stylesheet or other sources.

Modifying Multiple CSS Properties​

You can modify multiple CSS properties at once using the Style Object. For example, let's change the font size and font family of the h1 element:

mainHeading.style.fontSize = '24px';
mainHeading.style.fontFamily = 'Arial, sans-serif';

Removing CSS Properties​

You can remove a CSS property from the Style Object by setting its value to an empty string:

mainHeading.style.color = ''; // Removes the inline color property

This will revert the element's style to its default value or the value specified in a CSS stylesheet.

Conclusion​

The JavaScript DOM Style Object provides a powerful and convenient way to access and manipulate the CSS properties of HTML elements. By using the Style Object, you can create dynamic, interactive web experiences based on user input, events, or other conditions.

In this tutorial, we have covered how to access the Style Object for an HTML element, modify and access CSS property values, modify multiple CSS properties at once, and remove CSS properties. With these skills, you can begin to build engaging and responsive web pages with dynamic styling.

Remember, while inline styles and the Style Object can be valuable for creating dynamic web designs, it's best practice to use external CSS stylesheets or <style> tags for static styling. By combining static styling and dynamic inline styles through JavaScript DOM manipulation, you can create a powerful, interactive, and visually appealing web experience for your users.