—— 此篇开始 ——
1.操作元素的样式
1.设置元素的行内样式
语法：元素.style.样式名 = 样式值，给元素设置行内样式
注意：样式名带有中划线的，需要写成驼峰或者数组关联语法
2.获取元素的行内样式
语法：元素.style.样式名
得到：该元素指定样式的值
注意：只能拿到行内样式的值，非行内样式的值拿不到，样式名带有中划线的，需要写成驼峰或者数组关联语法
3.获取元素非行内样式
标准浏览器：
语法：window.getComputedStyle(要获取的元素).样式名
返回：该元素指定样式对应的值
注意：样式名带有中划线的，需要写成驼峰或者数组关联语法，行内和非行内都能拿到样式值，但是只能在标准浏览器下使用
IE低版本：
语法：元素.currentStyle.样式名
得到：该元素指定样式对应的值
注意：样式名带有中划线的，需要写成驼峰或者数组关联语法，行内和非行内都能拿到样式值，但是只能在IE低版本浏览器下使用
4.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 100px;
}
</style>
</head>
<body>
<div style="width:100px">你好世界</div>
<script>
//1.设置元素的行内样式
var box = document.getElementsByTagName('div')[0]
console.log (box);
box.style.color = 'skyblue'
//2.获取元素的行内样式
console.log (box.style.width);
console.log (box.style.height); //用的非行内式
//3.获取元素非行内样式
//标准浏览器
var res = window.getComputedStyle(box).height
console.log (res);
</script>
</body>
</html>结果：
2.操作元素类名
1.className
实际上就是操作元素的原生属性，只不过js内class是一个关键字，所以我们操作的原生属性改名叫做 className
读取：
语法：元素.className
得到：元素的完整类名,是一个字符串形式
写入：
语法：元素.className = '值'
作用：设置元素类名，完全覆盖式的设置
追加：
语法：元素.className += '值'
注意：值的位置要书写一个空格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
console.log (div.className);
div.className = 'zs'
console.log (div);
div.className += ' ls'
console.log (div);
</script>
</body>
</html>结果：
2.classList
每一个元素有一个属性叫做classList，是一个类似数组的集合，里面记录了元素所有的类名
添加一个类名：
语法：元素.classList.add('要添加的类名')
作用：给该元素添加一个类名，但是重复的不会添加进去
删除一个类名：
语法：元素.classList.remove('要删除的类名')
作用：给该元素删除一个类名
切换一个类名：
语法：元素.classList.toggle('要切换的类名')
作用：该元素切换一个类名
切换：有就删除，没有就添加
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>切换类名</button>
<div class="box box2"></div>
<script>
var div = document.querySelector('div')
var btn = document.querySelector('button')
console.log (div.classList);
div.classList.add('ww')
console.log (div);
div.classList.remove('ls')
console.log (div);
btn.onclick = function(){
div.classList.toggle('ww')
console.log (div);
}
</script>
</body>
</html>结果：
—— 此篇完 ——