一、样式
<body>
<div>
<p id="i1" >12345</p>
</div>
</body>
1.1 className
设置和获取样式的类名
var obj = document.getElementById("i1")
obj
<p id="i1">12345</p>
obj.className = "c1 c2" // 设置 class
"c1 c2"
obj.className // 获取class
"c1 c2"
1.2 classList
以列表的形式返回样式类名
// 获取列表
obj.classList
DOMTokenList(2) ["c1", "c2", value: "c1 c2"]
// 增加一个类名
obj.classList.add("c3")
obj.classList
DOMTokenList(3) ["c1", "c2", "c3", value: "c1 c2 c3"]
// 删除一个类名
obj.classList.remove("c2")
obj.classList
DOMTokenList(2) ["c1", "c3", value: "c1 c3"]
以上修改样式的时候，都是以类的形式存在的，但涉及到具体的某个样式的时候，可能不是很方便。
二、修改具体style样式
我们修改p标签具体的字符大小、颜色和背景色
var obj = document.getElementById("i1")
obj
<p id="i1">12345</p>
obj.style.color = 'red'; //字体颜色
"red"
obj.style.fontSize = '16px' //字体大小
"16px"
obj.style.backgroundColor = '#dddddd'; // 背景色
"#dddddd"
