JavaScript CSS Style属性对照表

封面图 • 2025-09-25 • JavaScript

在 JavaScript 中，你可以通过 `element.style` 或 `window.getComputedStyle(element)` 来操作或获取元素的样式。下面是一个 **JavaScript 与 CSS 样式属性的对照表**，帮助你理解如何将 CSS 属性转换为 JavaScript 的写法。

---

## ✅ JavaScript 与 CSS 属性对照表

| CSS 属性名 | JavaScript 属性名（驼峰命名） | 说明 |
|------------|-------------------------------|------|
| `background-color` | `backgroundColor` | 设置背景颜色 |
| `border` | `border` | 设置边框（如 `1px solid red`） |
| `border-bottom` | `borderBottom` | 底部边框 |
| `border-radius` | `borderRadius` | 圆角 |
| `color` | `color` | 文字颜色 |
| `font-size` | `fontSize` | 字体大小 |
| `font-weight` | `fontWeight` | 字体粗细 |
| `margin` | `margin` | 外边距 |
| `margin-top` | `marginTop` | 上外边距 |
| `padding` | `padding` | 内边距 |
| `padding-left` | `paddingLeft` | 左内边距 |
| `width` | `width` | 宽度 |
| `height` | `height` | 高度 |
| `display` | `display` | 显示方式（如 `none`, `block`, `flex`） |
| `position` | `position` | 定位方式（如 `absolute`, `relative`） |
| `top` | `top` | 定位位置 |
| `left` | `left` | 定位位置 |
| `transform` | `transform` | 转换（如 `rotate(30deg)`） |
| `opacity` | `opacity` | 透明度（0~1） |
| `z-index` | `zIndex` | 层叠顺序 |
| `cursor` | `cursor` | 鼠标指针样式（如 `pointer`） |
| `text-align` | `textAlign` | 文本对齐方式 |
| `vertical-align` | `verticalAlign` | 垂直对齐 |
| `background-image` | `backgroundImage` | 背景图片 |
| `background-repeat` | `backgroundRepeat` | 背景重复方式 |
| `background-position` | `backgroundPosition` | 背景位置 |
| `box-shadow` | `boxShadow` | 盒子阴影 |
| `transition` | `transition` | 过渡效果 |
| `animation` | `animation` | 动画 |

---

## 🔍 示例：JavaScript 操作样式

```javascript
const element = document.getElementById('myDiv');

// 设置样式
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.backgroundColor = 'lightblue';

// 获取样式（推荐使用 getComputedStyle）
const computedStyle = window.getComputedStyle(element);
console.log(computedStyle.color); // 输出当前颜色
```

---

## 📝 注意事项

- JavaScript 使用 **驼峰命名法（CamelCase）** 来表示 CSS 属性。
- 对于带有连字符（如 `background-color`），在 JS 中要写成 `backgroundColor`。
- `element.style` 只能获取内联样式（即 HTML 中的 `style` 属性），而 `window.getComputedStyle()` 可以获取所有计算后的样式。

---

如果你需要更详细的某个属性的用法，比如 `transform`、`transition`、`flex` 等，也可以告诉我，我可以提供更具体的示例和解释。