1.类名操作
- class类名以字符串的形式存储到标签和Dom元素的属性中，标签属性为class，Dom元素属性为className，两个属性是均支持读取和修改，修改其中的一个会同步至另一个属性
- className属性：拿到Dom后，通过这个属性来读取和修改
<body>
<div id="app">
<div id="box" class="box text-align">测试样式类名</div>
</div>
</body>
<script>
var box = document.querySelector("#box")
//读取并打印
console.log(box.className) //box text-align
//设置className
box.className = "box text-align text-success"
</script>
- 标签属性：通过getAtrribute()/setAtrribute()方法直接读取和修改
<script>
var box = document.querySelector("#box")
console.log(box.getAttribute("class")) //box text-align
box.setAttribute("class","box text-align text-success")
</script>
- 缺点：样式类以字符串形式读取和设置，但是样式类生效时时彼此独立的，不方便操作
2.classList 属性
- 这个属性以数组形式返回元素css类名，且支持对数组元素的怎删改查
- 注意：这个是HTML5里面新增的属性，旧版本浏览器不支持
<body>
<div id="box" class="box text-align">测试样式类名</div>
</body>
<script>
var box = document.querySelector("#box")
//一个带value属性的数组
//DOMTokenList(2) ['box', 'text-align', value: 'box text-align']
console.log(box.classList)
</script>
- 属性方法add(class1, class2, ...)：在元素中添加一个或多个类名（已经存在的类名不会重复添加，能自动去重）
<script>
var box = document.querySelector("#box")
//添加一个类
box.classList.add('text-success')
////DOMTokenList(3) ['box', 'text-align', 'text-success', value: 'box text-align']
console.log(box.classList)
</script>
- 属性方法remove(class1, class2, ...)：移除元素中一个或多个类名
<script>
var box = document.querySelector("#box")
//移除一个类
box.classList.remove('text-align')
////DOMTokenList(1) ['box']
console.log(box.classList)
</script>
- 属性方法toggle()：切换某个类名，如果这个类名已经存在就把他移除，如果类名不存在则添加这个类名
<script>
var box = document.querySelector("#box")
//切换一个类
box.classList.toggle('text-align')
////DOMTokenList(1) ['box']
console.log(box.classList)
//切换一个类
box.classList.toggle('text-align')
////DOMTokenList(2) ['box','text-align']
console.log(box.classList)
</script>
- 属性方法contains()：判断元素是否含有指定的css类名
<script>
var box = document.querySelector("#box")
// true
console.log(box.classList.contains("box"))
// false
console.log(box.classList.contains("text-success"))
</script>
<script>
var box = document.querySelector("#box")
// 替换类名
box.classList.replace("text-align","left-align")
//DOMTokenList(2) ['box', 'left-align', value: 'box left-align']
console.log(box.classList)
</script>
3.内联样式
<script>
var box = document.querySelector("#box")
// 替换类名
box.style.color = "red"
</script>
- 如果css属性带有 "-" ，设置时使用驼峰法或者数组语法
<script>
var box = document.querySelector("#box")
// 驼峰法 background-color
box.style.backgroundColor = "red"
//数组语法
box.style["box-sizing"] = "border-box"
</script>
