DOM：使用dom对样式属性进行操作（大小、颜色、位置......）

1. element.style 行内样式操作
2. element.className 类名样式操作
   通过element.style 行内样式操作：
   在修改style样式时，采取的是驼峰命名法backgroundColor，而不是background-color。
   行内样式操作一般在修改样式较少情况下使用。如果功能复杂或修改样式较多，使用类名样式操作更简单。
   点击一个div盒子后背景色发生变化，举例：

<div></div>
<script>
var box = document.querySelector("div");
box.onclick = function(){
	this.style.backgroundColor = "green";
	this.style.width = "300px";
}
</script>

tips:JS修改style样式操作，产生的是行内样式，权重比较高。

通过element.className 类名样式操作：
可以通过修改元素的className更改元素的样式，适用于样式较多或功能复杂的情况。
注意：
className会直接更改元素的类名，覆盖掉原先的类名，如果想保留原先的类名，可以这么做（box.className = “box change”）
代码举例：

<style>
.box {
	width: 100px;
	height: 100px;
	background-color: olivedrab;
}
.change {
	color: #fff;
	text-align: center;
	line-height: 100px;
	background-color: skyblue;
}
</style>
<div class="box">More</div>
<script>
// 点击box后，让文字居中且颜色为白色，盒子的背景色变为蓝色
var box = document.querySelector(".box");
box.onclick = function(){
// 既保留原先类名，又添加新类名
	box.className = "box change";
}
</script>