如何通过 JavaScript 动态修改元素的样式？

原创

于 2024-11-11 11:09:46 发布 · 2.9k 阅读

标签

#javascript #开发语言 #ecmascript

收录于

在JavaScript中，可以通过多种方式动态修改元素的样式，以下是一些常见的方法：

一、使用元素的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.backgro