当前位置：首页 > news >正文

19.从行内到类名：JavaScript 修改 CSS 样式的两种核心方式对比

news 2026/6/1 11:54:26

一、获取/修改样式属性

二、行内样式操作

代码示例：点击文字则放大字体。

方式一：

方式二：

三、行内样式操作（补充示例）

四、类名样式操作

一、获取/修改样式属性

CSS 中指定给元素的属性，都可以通过 JS 来修改。

二、行内样式操作

语法：

element.style.[属性名] = [属性值]; element.style.cssText = [属性名+属性值];

说明：

“行内样式”，通过 style 直接在标签上指定的样式。

优先级很高。

适用于改的样式少的情况。

注意：

style 中的属性都是使用驼峰命名 的方式和 CSS 属性对应的。

例如：font-size => fontSize,background-color => backgroundColor等

这种方式修改只影响到特定样式，其他内联样式的值不变。

代码示例：点击文字则放大字体。

方式一：

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div> </body> <script> function changeSize() { let element = document.querySelector('div') console.log(element.style) let size = parseInt(element.style.fontSize) + 10 element.style.fontSize = size + "px" // console.log(typeof(size)) } </script>

方式二：

<script> function changeSize() { let element = document.querySelector('div') console.log(element.style) let size = parseInt(element.style.fontSize) + 10 // element.style.fontSize = size + "px" element.style.cssText = "font-size:" + size + "px" // console.log(typeof(size)) } </script>

三、行内样式操作（补充示例）

说明：

“行内样式”，通过 style 直接在标签上指定的样式。优先级很高。

适用于改的样式少的情况。

代码示例：点击文字则放大字体。

style 中的属性都是使用驼峰命名 的方式和 CSS 属性对应的。

例如：font-size => fontSize,background-color => backgroundColor等

这种方式修改只影响到特定样式，其他内联样式的值不变。

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { font-size: 10px; } </style> </head> <body> <div onclick="changeSize()">哈哈哈</div> </body> <script> function changeSize() { let element = document.querySelector('div') console.log(element.style) let size = parseInt(element.style.fontSize) + 10 // element.style.fontSize = size + "px" element.style.cssText = "font-size:" + size + "px" // console.log(typeof(size)) } </script>

(注：此处标注“这种是无法实现效果的”，指的是如果样式写在<style>标签内，直接使用element.style.fontSize初始可能获取不到值，需要结合getComputedStyle，但此处仅展示代码结构)

四、类名样式操作

语法：

element.className = [CSS 类名];

说明：

修改元素的 CSS 类名。适用于要修改的样式很多的情况。

由于 class 是 JS 的保留字，所以名字叫做 className。

代码示例：开启夜间模式

HTML 与 CSS 结构：

<style> .light { background-color: aliceblue; color: black; width: 100%; height: 100%; } body, html { width: 100%; height: 100%; } .dark { background-color: black; color: white; width: 100%; height: 100%; } </style> <body> <div class="light"> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> </div> </body>

JS 切换逻辑：

<body> <div class="light" onclick="changeStyle()"> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> 这是一段话<br> </div> </body> <script> function changeStyle() { let element = document.querySelector('div') // 如果当前的样式是白天模式，此时就将其样式切换成黑夜模式 // 否则就将当前样式调整成白天模式 console.log(element.className) if(element.className == "light") { element.className = "dark" } else { element.className = "light" } } </script>

查看全文

http://www.jsqmd.com/news/928987/