- Objective：用JavaScript修改DOM（html文档）
- Breadcrumb: DOM - Element - 实例属性
# 概念阐释
## 语义
通过访问HTML标签中的style样式来访问和修改元素。
## 语法
```js
element.style.property = '';
// property CSS属性
// element 代表了获取HTML的变量
```
在DOM.style中，CSS属性不适用连字符（`background-color`），而是**使用驼峰字符**`BackgroundColor`。
# 实例
```js
let blueElement = document.querySelector('.blue'); //访问class='blue';的标签
blueElement.style.backgroundColor = 'blue';//修改blue元素的背景
// 另一种写法
document.querySelector('.blue').style.fontFamily = 'Roboto';//访问class='blue';的标签，修改字体样式
```
# 相关内容
# 问题
- [练习题](https://www.codecademy.com/courses/build-interactive-websites/lessons/javascript-dom/exercises/tweak-element-style)
- 改变`body`标签的背景色为`'#201F2E'`
- 改变class为`heading`的标签的字体，为`'Roboto'`.
# 问题答案
```js
const changeBackground = document.querySelector('body');
changeBackground.style.backgroundColor = '#201F2E';
const changeHeading = document.querySelector('heading');
changeHeading.style.fontFamily = 'Roboto';
```
# 参考资料
- [CSS参考](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index)