元素的样式设置

一、元素的样式设置

1、对象.style
2、对象.className
3、对象.setAttribute(“style”)
4、对象.setAttribute(“class”)
5、对象.style.setProperty(“CSS属性”, “CSS属性值”)
6、对象.style.cssText

二、使用步骤

1.html代码

代码如下（示例）：

<div id="box">我是一个盒子</div>
<button id="btn">改变背景颜色</button>

1.css代码

代码如下（示例）：

.blue {
   background-color: blue;
}

2.js代码

代码如下（示例）：

var box = document.getElementById('box')
var btn = document.getElementById('btn')
btn.addEventListener('click', function () {
    // 1、对象.style
    box.style.backgroundColor = 'blue'
    // 2、对象.className
    box.className = 'blue'
    // 3、对象.setAttribute("style")
    box.setAttribute('style', 'background-color:blue')
    // 4、对象.setAttribute("class")
    box.setAttribute('class', 'blue')
    // 5、对象.style.setProperty("CSS属性", "CSS属性值")
    box.style.setProperty('background-color', 'blue')
    // 6、对象.style.cssText 
    box.style.cssText = 'background-color:blue'