快捷導(dǎo)航

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

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

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

一、使用元素的style屬性

這是最直接的方式，通過(guò)獲取元素對(duì)象后，直接操作其style屬性來(lái)設(shè)置樣式。

示例1：修改單個(gè)元素的樣式

<!DOCTYPE html>
<html>

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

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

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

</html>

在上述示例中：

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

二、使用classList屬性

可以通過(guò)操作元素的classList屬性來(lái)添加、移除或切換元素的類名，從而間接修改元素的樣式，因?yàn)轭惷ǔｊP(guān)聯(lián)著相應(yīng)的CSS樣式規(guī)則。

示例2：添加和移除類名來(lái)改變樣式

<!DOCTYPE html>
<html>

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

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

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

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

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

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

</html>

在這個(gè)示例中：

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

三、使用setProperty方法（通過(guò)CSSStyleDeclaration對(duì)象）

可以獲取元素的CSSStyleDeclaration對(duì)象，然后使用其setProperty方法來(lái)設(shè)置樣式屬性和值。

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

<!DOCTYPE html>
<html>

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

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

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

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

</html>

在示例3中：

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

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

總結(jié)

到此這篇關(guān)于如何通過(guò)JavaScript動(dòng)態(tài)修改元素的樣式的文章就介紹到這了,更多相關(guān)JS動(dòng)態(tài)修改元素的樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: