原生JavaScript修改CSS样式的4种方式及示例

作者：流萤

时间：2026-11-01

本文详细介绍原生JavaScript修改CSS样式的四种常用方式：直接设置style属性、使用setAttribute、修改cssText以及操作className和classList。通过具体代码示例演示如何动态改变元素字体、颜色和大小，并对比各方法的适用场景与优缺点，帮助开发者灵活掌握前端样式动态控制技巧。

文章目录

应用style属性

var domName = document.querySelector('#domName');
domName.style.backgroundColor = '#aaa'

使用setAttribute设置属性

var domName = document.querySelector('#domName');
domName.setAttribute('style', 'background: #000;')

配置cssText

var domName = document.querySelector('#domName');
domName.style.cssText = 'background:#000; margin:0px 2px;'

指定class

通过重写className来调整CSS样式

var domName = document.querySelector('#domName');
domName.className = 'red';

此外利用classList修改CSS样式，可防止class被覆盖

var bottom = document.querySelector('#bottom');
bottom.classList.add(className); // 添加一个类名
bottom.classList.remove(className); // 移除一个类名
bottom.classList.add('red')

补充：JS修改CSS的代码示例

任务目标

点击按钮，调整p标签的字体、颜色、大小

程序代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript操纵Css</title>
<style type="text/css">
    .two{
        color: rebeccapurple;
        font-size: 45px;
        font-family: "BIZ UDP明朝 Medium";
    }
</style>
</head>
<script type="text/javascript">
    //方式一：修改多个样式属性
    function changeCss () {
//color: blue; font‐size: 30px; font‐family: 楷体;
//得到first这个p
        var p1 = document.getElementById("first");
//语法：元素.style.样式名=样式值;
        p1.style.color = "blue";
        p1.style.fontSize = "30px";
        p1.style.fontFamily = "楷体";
    }
    //方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式
    function changeClass () {
        var p2 = document.getElementById("second");
//语法：元素.className = "类名";
        p2.className = "two";
    }
</script>
<body>
<p id="first">
    元素.style.样式名 = "样式值";
</p>
<p id="second">
    元素.className = "类名";
</p>
<input type="button" value="style.样式名,修改多个样式属性" onclick="changeCss()"/>
<input type="button" value="className,改变类样式" onclick="changeClass()"/>
</body>
</html>