25-js 获取css样式的几种方法

通过js设置了HTNL的css样式属性

• 行内式的添加样式

1.变量名.style.属性名="属性值" //能添加多个样式属性
2.变量.style="属性名以及属性的值"//只能为其添加一个样式
 //第一种可以添加多个不同的样式但是每添加一个样式都需要在写一次规格
 //第二种只能添加一种样式多次添加或被覆盖
3.变量名.style.cssText="样式1 样式2...."
//一次性可以添加多个样式
//如：box.cssText="font-size:17px; color:red; ..."
//相比上面两个cssText更加的便捷

以上的都是通过js添加的行内样式

---

• 获取css样式的属性值 不是行内式的样式

1. getComputedStyle 访问HTMLcss样式

语法格式：
getComputedStyle(变量名,伪元素)
//getComputedStyle可以直接访问css样式的属性但是时最终生效的属性 只能获取但是不能修改
//如果不需要获伪元素的属性则里面的值填写null
    取：
//需要将取得最终样式存在一个变量里面在根据这个变量来获取某个特定的属性
var box = document.querySelector("选择器")
var box2 = box.getComputedStyle(box.null)
console.log(box2.width);

//该对像主要访问现在主流的浏览器 IE不兼容

2. currentStyle  在IE获取一个元素的最终样式
currentStyle主要是针对IE浏览器来获取css样式属性的 其他主流浏览器不兼容

---

• 通过js对HTML标签的类名的控制

通过classlist的属性对类名的操作

语法格式：
1. 变量.classlist.add("添加的类名")

2. 变量.classlist.remove("移除的类名")

3. 变量.classlist.toggle("需要切换的类名")
//一般和点击事件配合使用 当用户点击的时候添加下一次点击移除
4. 变量.classlist.item("类名")
//来获取类名的位置 如果实参里面填写的时类名则显示该类名的位置 
//如果里面填写的是数字显示的时该位置的对应的类名

---

只能获取值不能进行修改
calsslist.add添加类名
classlist.remove移除类名
classlist.toggle 切换类名
classlist.item（） 显示类名的位置