CSS 样式写法
- 本质：通过 CSS（层叠样式表）规则声明元素样式，属于 静态样式定义。
- 作用方式：通过选择器匹配元素，统一声明样式规则，浏览器解析后渲染。
- 常见形式：
- 内联样式：
<div style="color: red;"> - 内部样式表：
<style>div { font-size: 16px; }</style> - 外部样式表：
<link rel="stylesheet" href="style.css">
2. JS 样式写法
- 本质：通过 JavaScript 操作 DOM 元素的
style对象，属于 动态样式修改。 - 作用方式：在脚本运行时通过代码直接修改元素的样式属性。
- 常见形式：javascript
element.style.color = 'red'; // 直接修改单个样式 element.classList.add('active'); // 通过类名修改样式
css样式写法一般都是： ” style=”样式：值“ “ ；js样式写法一般都是： “ 对象.style.样式=“ 样式值“ ”
维度 |
标签（CSS） |
标签（JS） |
语言类型 |
样式表语言（非编程语言，无逻辑控制） |
编程语言（支持条件、循环、函数等逻辑） |
作用对象 |
控制元素的外观样式（布局、颜色、动画等） |
控制页面行为逻辑（交互、数据处理、动态更新） |
语法核心 |
选择器 + 属性声明（如 ） |
变量、函数、DOM 操作（如 ） |
样式命名差异 |
属性用连字符（ ） |
属性用驼峰命名（ ） |
动态能力 |
静态定义（需配合媒体查询等有限动态特性） |
完全动态（可根据数据、事件实时修改样式） |
加载与执行 |
浏览器解析时渲染样式，阻塞页面渲染 |
默认阻塞解析（可通过 异步加载） |
