SoFunction
Updated on 2025-04-03

A detailed explanation of how to dynamically modify the style of elements through JavaScript

In JavaScript, there are several ways to dynamically modify the style of an element. Here are some common methods:

1. Use the style attribute of the element

This is the most direct way to directly operate the element object after obtaining itstyleProperties to style.

Example 1: Modify the style of a single element

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptExample of dynamically modifying element styles</title>
</head>

<body>
    <p >This is an original paragraph。</p>
    <button onclick="changeStyle()">Click to change the paragraph style</button>
    <script>
        function changeStyle() {
            // Get the element object with id myParagraph            var paragraph = ('myParagraph');

            // Modify the text color and background color of the paragraph through the style attribute             = 'blue';
             = 'lightyellow';
        }
    </script>
</body>

</html>

In the above example:

  • First pass('myParagraph')Get itidformyParagraphparagraph element object.
  • Then directly pass the element objectstyleProperties, use = 'blue';Set the paragraph text color to blue, use = 'lightyellow';Set the background color to light yellow.

2. Use the classList attribute

It can be operated on elementsclassListAttributes to add, remove or switch element class names to indirectly modify element styles, because class names are usually associated with corresponding CSS style rules.

Example 2: Add and remove class names to change styles

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptExample of dynamically modifying element styles</title>
    <style>
       .highlight {
            color: red;
            background-color: lightgray;
        }

       .underline {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <p >This is an original paragraph。</p>
    <button onclick="addHighlight()">Add highlight style</button>
    <button onclick="removeHighlight()">Remove highlight styles</button>
    <button onclick="toggleUnderline()">Switch underline style</button>
    <script>
        var paragraph = ('myParagraph');

        function addHighlight() {
            // Add a highlight class name to paragraph elements to make them apply relevant CSS styles            ('highlight');
        }

        function removeHighlight() {
            // Remove the highlight class name from the paragraph element and restore the original style            ('highlight');
        }

        function toggleUnderline() {
            // Switch the underline class name of paragraph elements to realize the switching of underline style            ('underline');
        }
    </script>
</body>

</html>

In this example:

  • First, the CSS style rules corresponding to the two class names are defined in the HTML header..highlightThe text color is set to red and the background color is light gray..underlineThe class has the text underlined.
  • In the JavaScript section,('myParagraph')Get the paragraph element object and store it in a variableparagraphmiddle.
  • When clickingAdd highlight styleWhen the button is passed('highlight')Add to paragraph elementshighlightClass name, making it apply the relevant CSS style.
  • When clickingRemove highlight stylesWhen the button is passed('highlight')Remove from paragraph elementhighlightClass name, restore the original style.
  • When clickingSwitch underline styleWhen the button is passed('underline')Switch paragraph elementsunderlineClass name, realizes the switching of underscore styles.

3. Use the setProperty method (through the CSSStyleDeclaration object)

Can get elementsCSSStyleDeclarationobject, then use itsetPropertyMethod to set style properties and values.

Example 3: Use the setProperty method to modify the style

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptExample of dynamically modifying element styles</title>
</head>

<body>
    <p >This is an original paragraph。</p>
    <button onclick="modifyStyle()">Modify paragraph style</button>
    <script>
        function modifyStyle() {
            // Get the element object with id myParagraph            var paragraph = ('myParagraph');

            // Get the CSSStyleDeclaration object of the element            var styleDeclaration = ;

            // Use the setProperty method to set style properties and values            ('color', 'green', 'important');
            ('font-size', '18px');
        }
    </script>
</body>

</html>

In Example 3:

  • Get it firstidformyParagraphelement object.
  • Then get the element'sCSSStyleDeclarationObject, byvar styleDeclaration = ;accomplish.
  • Last usedsetPropertyMethods, such as('color', 'green', 'important');Set the paragraph text color to green and addimportantTags to increase priority,('font-size', '18px');Set the font size to18px。

Through the above methods, the style of elements can be flexibly and dynamically modified in JavaScript according to different needs to achieve various web interaction effects.

Summarize

This is the article about how to dynamically modify the style of elements through JavaScript. For more relevant JS dynamically modify the style of elements, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!