HTML DOM Style Object: Accessing and Modifying Styles

The HTML DOM style object provides a powerful interface to dynamically access and manipulate the inline styles of HTML elements using JavaScript. This allows for interactive and responsive web pages where the appearance of elements can change based on user actions or other events. In this article, we will explore how to use the style object, its properties, and methods to achieve dynamic styling.

What is the HTML DOM Style Object?

Every HTML element in the DOM has a style property, which represents a CSSStyleDeclaration object. This object contains a list of all the CSS properties that have been applied directly to that element using the style attribute. Through this object, you can access, modify, and even add new inline styles programmatically.

Purpose of the Style Object

The primary purpose of the style object is to:

• Read inline styles: Retrieve the current style properties and their values of an element.
• Modify inline styles: Change the appearance of HTML elements dynamically by adjusting CSS properties.
• Add new styles: Introduce new styles to elements, enabling complex visual effects.
• Create interactive UIs: Build responsive web pages that adjust their look based on user interaction or application state.

Accessing the Style Object

To get started with the style object, you first need to access an HTML element using JavaScript. Once you have the element, you can directly access its style property.

<div id="myDiv" style="color: blue; font-size: 16px;">This is a div.</div>

<script>
  const myDivElement = document.getElementById("myDiv");
  const divStyle = myDivElement.style;

  console.log(divStyle.color); // Output: blue
  console.log(divStyle.fontSize); // Output: 16px
</script>

In this example, myDivElement.style gives access to the inline styles of the div.

Important Style Object Properties

The style object contains numerous properties, each corresponding to a CSS property that can be modified. Here are some of the most commonly used properties:

Property	Type	Description
`color`	String	Sets or returns the text color.
`backgroundColor`	String	Sets or returns the background color.
`fontFamily`	String	Sets or returns the font family.
`fontSize`	String	Sets or returns the font size.
`fontWeight`	String	Sets or returns the font weight.
`textAlign`	String	Sets or returns the horizontal alignment of the text.
`padding`	String	Sets or returns the padding of an element.
`margin`	String	Sets or returns the margin of an element.
`width`	String	Sets or returns the width of the element.
`height`	String	Sets or returns the height of the element.
`display`	String	Sets or returns the display type.
`border`	String	Sets or returns the border of the element.
`visibility`	String	Sets or returns the visibility of the element.

Note: When accessing CSS properties with hyphens (e.g., font-size), you must use camelCase notation in JavaScript (e.g., fontSize). 💡

Modifying Styles

To modify the styles of an element, simply assign new values to the corresponding properties of its style object.

<p id="myPara" style="color: green;">This is a paragraph.</p>

<button id="styleButton">Change Style</button>

<script>
  const myParaElement = document.getElementById("myPara");
  const changeStyleButton = document.getElementById("styleButton");

  changeStyleButton.addEventListener("click", function () {
    myParaElement.style.color = "red";
    myParaElement.style.fontSize = "20px";
    myParaElement.style.backgroundColor = "lightyellow";
  });
</script>

In this example, clicking the button will change the paragraph’s color, font size, and background color.

Adding New Styles

You can also add new inline styles to an element by setting the appropriate style properties.

<span id="mySpan">This is a span.</span>

<button id="addStyleButton">Add Style</button>

<script>
    const mySpanElement = document.getElementById("mySpan");
    const addStyleBtn = document.getElementById("addStyleButton");

    addStyleBtn.addEventListener('click', function() {
        mySpanElement.style.fontWeight = 'bold';
        mySpanElement.style.textDecoration = 'underline';
        mySpanElement.style.fontStyle = 'italic';
    });
</script>

Clicking the button will add bold text, underline and italic to the span element.

Removing Inline Styles

To remove an inline style, set the corresponding style property to an empty string.

<div id="myStyledDiv" style="color: purple; font-weight: bold;">Styled Div</div>
<button id="removeStyleButton">Remove Color Style</button>

<script>
 const styledDiv = document.getElementById("myStyledDiv");
 const removeStyleBtn = document.getElementById("removeStyleButton");
  removeStyleBtn.addEventListener("click", function () {
    styledDiv.style.color = ""; //remove the color
  });
</script>

Clicking the button will remove color style from the div element.

Practical Examples

Let’s explore more practical examples to demonstrate the power of the style object.

Example 1: Toggle Element Visibility

<div id="visibilityDiv" style="background-color: lightblue; padding: 10px;">
  This div can be toggled.
</div>

<button id="toggleButton">Toggle Visibility</button>

<script>
  const visibilityDivElement = document.getElementById("visibilityDiv");
  const toggleButtonElement = document.getElementById("toggleButton");

  toggleButtonElement.addEventListener("click", function () {
    if (visibilityDivElement.style.visibility === "hidden") {
      visibilityDivElement.style.visibility = "visible";
    } else {
      visibilityDivElement.style.visibility = "hidden";
    }
  });
</script>

This example toggles the visibility of a div when the button is clicked.

Example 2: Dynamic Background Color Change

<div id="colorChangeDiv" style="padding: 20px; text-align: center;">
  Click to change color
</div>
<button id="changeColorButton">Change Color</button>

<script>
const colorChangeDivElement = document.getElementById("colorChangeDiv");
const changeColorBtn = document.getElementById("changeColorButton");

changeColorBtn.addEventListener("click", function () {
   const randomColor = Math.floor(Math.random() * 16777215).toString(16);
    colorChangeDivElement.style.backgroundColor = "#" + randomColor;
});
</script>

Clicking the button will change the background color of the div to a random color.

Example 3: Animating an Element

<div
  id="animatedDiv"
  style="
    width: 50px;
    height: 50px;
    background-color: red;
    position: relative;
    margin-bottom: 20px;
  "
></div>

<button id="animateButton">Animate</button>

<script>
    const animatedDivElement = document.getElementById("animatedDiv");
    const animateBtn = document.getElementById("animateButton");

    let position = 0;
    let animationInterval;

    animateBtn.addEventListener("click", function() {
        if(!animationInterval){
           animationInterval = setInterval(function() {
            position += 5;
            animatedDivElement.style.left = position + 'px';
            if(position > 200) {
               clearInterval(animationInterval)
                animationInterval = null;
                position =0;
            }
           }, 50);
        }
    });
</script>

This example demonstrates a simple animation where a div moves to the right when the button is clicked.

Best Practices

• Use Inline Styles Sparingly: While the style object is powerful, excessive use of inline styles can make your code harder to manage. Prefer CSS classes for styling and use the style object for dynamic changes or specific cases.
• Camel Case Notation: Always use camelCase notation for CSS property names in JavaScript (e.g., backgroundColor instead of background-color).
• Prioritize CSS Classes: Use CSS classes to set the general look and feel of the website, and use javascript to make dynamic and small adjustments as needed.
• Avoid Direct Pixel Manipulation: If performance is key, use CSS animations and transitions to achieve animation effects as they can be hardware accelerated.
• Test across Browsers: Ensure your dynamic style changes work correctly on different browsers and platforms.

Conclusion

The HTML DOM style object provides an essential tool for creating dynamic and interactive web experiences. By understanding how to access and modify the style object’s properties, you can create engaging applications that respond to user actions and data changes. Remember to use these techniques wisely, combining them with well-structured CSS for a maintainable and performant codebase. With practice, you will find this object to be an indispensable part of your web development toolkit.