一文詳解如何通過JavaScript動態(tài)修改元素的樣式

更新時間：2024年12月25日 11:47:21 作者：alankuo

這篇文章主要介紹了如何通過JavaScript動態(tài)修改元素的樣式,三種方式分別是直接操作元素的style屬性、通過classList屬性添加或移除類名、以及使用CSSStyleDeclaration對象的setProperty方法,每種方法都有其適用場景,需要的朋友可以參考下

一、使用元素的style屬性

這是最直接的方式，通過獲取元素對象后，直接操作其style屬性來設置樣式。

示例1：修改單個元素的樣式

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript動態(tài)修改元素樣式示例</title>
</head>

<body>
    <p id="myParagraph">這是一個原始段落內(nèi)容。</p>
    <button onclick="changeStyle()">點擊改變段落樣式</button>
    <script>
        function changeStyle() {
            // 獲取id為myParagraph的元素對象
            var paragraph = document.getElementById('myParagraph');

            // 通過style屬性修改段落的文字顏色和背景顏色
            paragraph.style.color = 'blue';
            paragraph.style.backgroundColor = 'lightyellow';
        }
    </script>
</body>

</html>

在上述示例中：

首先通過document.getElementById('myParagraph')獲取到id為myParagraph的段落元素對象。
然后直接通過該元素對象的style屬性，使用paragraph.style.color = 'blue';將段落文字顏色設置為藍色，使用paragraph.style.backgroundColor = 'lightyellow';將背景顏色設置為淺黃色。

二、使用classList屬性

可以通過操作元素的classList屬性來添加、移除或切換元素的類名，從而間接修改元素的樣式，因為類名通常關聯(lián)著相應的CSS樣式規(guī)則。

示例2：添加和移除類名來改變樣式

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript動態(tài)修改元素樣式示例</title>
    <style>
       .highlight {
            color: red;
            background-color: lightgray;
        }

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

<body>
    <p id="myParagraph">這是一個原始段落內(nèi)容。</p>
    <button onclick="addHighlight()">添加高亮樣式</button>
    <button onclick="removeHighlight()">移除高亮樣式</button>
    <button onclick="toggleUnderline()">切換下劃線樣式</button>
    <script>
        var paragraph = document.getElementById('myParagraph');

        function addHighlight() {
            // 為段落元素添加highlight類名，使其應用相關CSS樣式
            paragraph.classList.add('highlight');
        }

        function removeHighlight() {
            // 從段落元素移除highlight類名，恢復原來樣式
            paragraph.classList.remove('highlight');
        }

        function toggleUnderline() {
            // 切換段落元素的underline類名，實現(xiàn)下劃線樣式的切換
            paragraph.classList.toggle('underline');
        }
    </script>
</body>

</html>

在這個示例中：

首先在HTML頭部定義了兩個類名對應的CSS樣式規(guī)則，.highlight類設置了文字顏色為紅色、背景顏色為淺灰色，.underline類設置了文本有下劃線。
在JavaScript部分，通過document.getElementById('myParagraph')獲取到段落元素對象，并將其存儲在變量paragraph中。
當點擊添加高亮樣式按鈕時，通過paragraph.classList.add('highlight')為段落元素添加highlight類名，使其應用相關CSS樣式。
當點擊移除高亮樣式按鈕時，通過paragraph.classList.remove('highlight')從段落元素移除highlight類名，恢復原來樣式。
當點擊切換下劃線樣式按鈕時，通過paragraph.classList.toggle('underline')切換段落元素的underline類名，實現(xiàn)下劃線樣式的切換。

三、使用setProperty方法（通過CSSStyleDeclaration對象）

可以獲取元素的CSSStyleDeclaration對象，然后使用其setProperty方法來設置樣式屬性和值。

示例3：使用setProperty方法修改樣式

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript動態(tài)修改元素樣式示例</title>
</head>

<body>
    <p id="myParagraph">這是一個原始段落內(nèi)容。</p>
    <button onclick="modifyStyle()">修改段落樣式</button>
    <script>
        function modifyStyle() {
            // 獲取id為myParagraph的元素對象
            var paragraph = document.getElementById('myParagraph');

            // 獲取元素的CSSStyleDeclaration對象
            var styleDeclaration = paragraph.style;

            // 使用setProperty方法設置樣式屬性和值
            styleDeclaration.setProperty('color', 'green', 'important');
            styleDeclaration.setProperty('font-size', '18px');
        }
    </script>
</body>

</html>

在示例3中：

首先獲取到id為myParagraph的元素對象。
然后獲取該元素的CSSStyleDeclaration對象，通過var styleDeclaration = paragraph.style;實現(xiàn)。
最后使用setProperty方法，如styleDeclaration.setProperty('color', 'green', 'important');將段落文字顏色設置為綠色，并添加important標記以提高優(yōu)先級，styleDeclaration.setProperty('font-size', '18px');將字體大小設置為18px。

通過以上這些方法，可以根據(jù)不同的需求在JavaScript中靈活地動態(tài)修改元素的樣式，以實現(xiàn)各種網(wǎng)頁交互效果。