### JavaScript 控制 CSS 属性对照表详解
#### 一、前言
在前端开发中，JavaScript（简称JS）与CSS的交互是实现动态效果的重要手段之一。通过JS操作DOM元素来改变其CSS样式，可以轻松地实现动画效果、响应式布局调整等功能。本文将详细介绍如何利用JavaScript控制CSS属性，并提供一份详尽的属性对照表，帮助读者更好地理解和掌握这一技能。
#### 二、基础知识
##### 2.1 CSS属性
CSS属性定义了HTML元素的外观和布局。它们由属性名和值组成，例如`color: red;`表示将元素的文本颜色设置为红色。CSS属性是不区分大小写的，即`color`和`COLOR`被视为相同的属性。
##### 2.2 JavaScript DOM操作
JavaScript通过DOM（Document Object Model，文档对象模型）可以访问并操作HTML文档中的元素。DOM提供了许多方法和属性来读取或修改元素的CSS样式，如`element.style.color = 'red';`。
##### 2.3 对照表简介
下面的对照表列出了常见的CSS属性及其对应的JavaScript DOM属性形式。这些属性分为几大类：盒子模型、颜色和背景、样式、文字样式及文本属性等。
#### 三、对照表详解
##### 3.1 盒子模型
| CSS 属性 | 描述 | JS 属性 |
|-------------------|--------------------------------------------------------|-----------------------|
| `border` | 设置边框的宽度、样式和颜色 | `border` |
| `border-bottom` | 设置下边框 | `borderBottom` |
| `border-bottom-color` | 设置下边框颜色 | `borderBottomColor` |
| `border-bottom-style` | 设置下边框样式 | `borderBottomStyle` |
| `border-bottom-width` | 设置下边框宽度 | `borderBottomWidth` |
| `border-color` | 设置边框颜色 | `borderColor` |
| `border-left` | 设置左边框 | `borderLeft` |
| `border-left-color` | 设置左边框颜色 | `borderLeftColor` |
| `border-left-style` | 设置左边框样式 | `borderLeftStyle` |
| `border-left-width` | 设置左边框宽度 | `borderLeftWidth` |
| `border-right` | 设置右边框 | `borderRight` |
| `border-right-color` | 设置右边框颜色 | `borderRightColor` |
| `border-right-style` | 设置右边框样式 | `borderRightStyle` |
| `border-right-width` | 设置右边框宽度 | `borderRightWidth` |
| `border-style` | 设置边框样式 | `borderStyle` |
| `border-top` | 设置上边框 | `borderTop` |
| `border-top-color` | 设置上边框颜色 | `borderTopColor` |
| `border-top-style` | 设置上边框样式 | `borderTopStyle` |
| `border-top-width` | 设置上边框宽度 | `borderTopWidth` |
| `border-width` | 设置边框宽度 | `borderWidth` |
##### 3.2 颜色和背景
| CSS 属性 | 描述 | JS 属性 |
|---------------------|--------------------------------------------------------|------------------|
| `background` | 设置背景图像和/或颜色 | `background` |
| `background-attachment` | 设置背景图像固定或滚动 | `backgroundAttachment` |
| `background-color` | 设置背景颜色 | `backgroundColor` |
| `background-image` | 设置背景图像 | `backgroundImage` |
| `background-position` | 设置背景图像的位置 | `backgroundPosition` |
| `background-repeat` | 设置背景图像是否重复显示 | `backgroundRepeat` |
| `color` | 设置文本颜色 | `color` |
##### 3.3 样式
| CSS 属性 | 描述 | JS 属性 |
|-------------------------|----------------------------------------------------------|---------------------|
| `display` | 设置元素的显示类型 | `display` |
| `list-style-type` | 设置列表项标记类型 | `listStyleType` |
| `list-style-image` | 设置列表项标记的图像 | `listStyleImage` |
| `list-style-position` | 设置列表项标记相对于列表项的位置 | `listStylePosition` |
| `list-style` | 设置列表项标记类型、图像和位置 | `listStyle` |
| `white-space` | 设置空白符如何处理 | `whiteSpace` |
##### 3.4 文字样式
| CSS 属性 | 描述 | JS 属性 |
|-------------------|--------------------------------------------------------|------------------|
| `font` | 设置字体族、大小、风格、变体和粗细 | `font` |
| `font-family` | 设置字体族 | `fontFamily` |
| `font-size` | 设置字体大小 | `fontSize` |
| `font-style` | 设置字体风格（斜体或正常） | `fontStyle` |
| `font-variant` | 设置小写字母大写 | `fontVariant` |
| `font-weight` | 设置字体粗细 | `fontWeight` |
##### 3.5 文本
| CSS 属性 | 描述 | JS 属性 |
|------------------|--------------------------------------------------------|------------------|
| `text-align` | 设置文本对齐方式 | `textAlign` |
| `text-decoration`| 设置文本装饰（如下划线） | `textDecoration` |
| `text-indent` | 设置首行缩进 | `textIndent` |
| `text-transform` | 设置字母大小写转换 | `textTransform` |
#### 四、示例代码
```javascript
// 获取一个元素
var elem = document.getElementById('myElement');
// 修改元素的CSS属性
elem.style.color = 'blue';
elem.style.fontSize = '20px';
// 获取元素的CSS属性值
console.log(elem.style.color); // 输出当前颜色
```
#### 五、总结
通过上述对照表的学习，我们可以更加熟练地使用JavaScript来操作CSS属性，从而实现网页的动态效果。需要注意的是，当使用JavaScript设置CSS属性时，属性名通常会采用驼峰式命名法（CamelCase），即除了第一个单词外其他单词的首字母大写。掌握这些知识后，开发者可以在实际项目中更加灵活地运用这些技术，提高开发效率。
小话哥2014-06-16对我有帮助谢谢
