一文详解如何通过JavaScript动态修改元素的样式

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

这篇文章主要介绍了如何通过JavaScript动态修改元素的样式,三种方式分别是直接操作元素的style属性、通过classList属性添加或移除类名、以及使用CSSStyleDeclaration对象的setProperty方法,每种方法都有其适用场景,需要的朋友可以参考下

一、使用元素的style属性

这是最直接的方式，通过获取元素对象后，直接操作其style属性来设置样式。

示例1：修改单个元素的样式

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript动态修改元素样式示例</title>
</head>

<body>
    <p id="myParagraph">这是一个原始段落内容。</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属性来添加、移除或切换元素的类名，从而间接修改元素的样式，因为类名通常关联着相应的CSS样式规则。

示例2：添加和移除类名来改变样式

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript动态修改元素样式示例</title>
    <style>
       .highlight {
            color: red;
            background-color: lightgray;
        }

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

<body>
    <p id="myParagraph">这是一个原始段落内容。</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类名，实现下划线样式的切换
            paragraph.classList.toggle('underline');
        }
    </script>
</body>

</html>

在这个示例中：

首先在HTML头部定义了两个类名对应的CSS样式规则，.highlight类设置了文字颜色为红色、背景颜色为浅灰色，.underline类设置了文本有下划线。
在JavaScript部分，通过document.getElementById('myParagraph')获取到段落元素对象，并将其存储在变量paragraph中。
当点击添加高亮样式按钮时，通过paragraph.classList.add('highlight')为段落元素添加highlight类名，使其应用相关CSS样式。
当点击移除高亮样式按钮时，通过paragraph.classList.remove('highlight')从段落元素移除highlight类名，恢复原来样式。
当点击切换下划线样式按钮时，通过paragraph.classList.toggle('underline')切换段落元素的underline类名，实现下划线样式的切换。

三、使用setProperty方法（通过CSSStyleDeclaration对象）

可以获取元素的CSSStyleDeclaration对象，然后使用其setProperty方法来设置样式属性和值。

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

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript动态修改元素样式示例</title>
</head>

<body>
    <p id="myParagraph">这是一个原始段落内容。</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;实现。
最后使用setProperty方法，如styleDeclaration.setProperty('color', 'green', 'important');将段落文字颜色设置为绿色，并添加important标记以提高优先级，styleDeclaration.setProperty('font-size', '18px');将字体大小设置为18px。

通过以上这些方法，可以根据不同的需求在JavaScript中灵活地动态修改元素的样式，以实现各种网页交互效果。

总结

到此这篇关于如何通过JavaScript动态修改元素的样式的文章就介绍到这了,更多相关JS动态修改元素的样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

原生js操作checkbox用document.getElementById实现
js操作checkbox本人建议用document.getElementById(checkbox_id).checked不推荐使用jquery操作checkbox，感兴趣的朋友不要错过
2013-10-10
echarts实现饼图与样式设置
这篇文章介绍了echarts实现饼图与样式设置的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
TypeScript中never类型的妙用详解
TypeScript 是一种静态类型的编程语言,它可以让我们在编写 JavaScript 代码时,提前发现并避免一些潜在的错误,本文主要为大家介绍了TypeScript中never类型的妙用,感兴趣的可以了解下
2023-11-11
Javascript验证上传图片大小[前台处理]
在做上传图片的时候，如果不限制上传图片大小，后果非常的严重。解决这个问题有两种方式：后台处理、前台处理
2014-07-07
前端获取IP地址的方法总结
这篇文章主要介绍了前端获取IP地址的四种方法：Vite配置、WebRTC、internal-ip插件及第三方API,并说明了各方法在不同环境下的适用性与限制,通过代码示例讲解的非常详细,需要的朋友可以参考下
2025-07-07
js实现日历与定时器
本文主要介绍了js实现日历与定时器的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
JavaScript生成指定范围随机数和随机序列的方法
这篇文章主要介绍了JavaScript生成指定范围随机数和随机序列,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2018-05-05
相当流畅的JavaScript拖拽排序实现方法代码
拖拽排序是一种在网页设计和应用程序中常见的交互方式,允许用户通过鼠标或触摸操作来重新排列页面或界面上的元素,这篇文章主要介绍了相当流畅的JavaScript拖拽排序实现的相关资料,需要的朋友可以参考下
2026-04-04
基于javascript滚动图片具体实现
这篇文章主要介绍了javascript滚动图片具体实现，有需要的朋友可以参考一下
2013-11-11
谈谈impress.js初步理解
impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。感兴趣的朋友跟着小编一起学习吧
2015-09-09