js操作元素样式

操作元素样式
+ 样式分成两个大类
1. 行内样式
2. 非行内样式

获取元素的样式
1. style 的方式
=> 利用原生属性的方式
=> 元素.style
=> 获取到的内容是一个对象, 里面包含元素所有的可设置样式
=> 你想获取那一个样式的值, 就从对象里面获取就可以了
=> 但是 **只能获取到行内样式**
2. 获取非行内样式
2-1. window.getComputedStyle() 方法
=> 标准浏览器
=> 语法: window.getComputedStyle(要获取样式的元素)
=> 返回值: 一个对象, 里面包含所有可设置样式, 每一个样式都有值, 那你没有设置的有默认值
=> 你需要那一个样式, 直接再找个对象里面访问就可以了
2-2. currentStyle 属性
=> IE 低版本
=> 语法: 要获取样式的元素.currentStyle
=> 得到的就是一个对象, 里面包含元素的所有可设置样式, 每一个样式都有值
=> 你需要哪一个样式, 直接再对象里面查找就可以了
说明:
+ 当你获取样式的时候
+ 如果你使用 点语法
-> 你获取带有中划线的样式要转化成驼峰的方式

例如：

var style = window.getComputedStyle(div)
console.log(style.backgroundColor)

+ 如果你使用 数组关联语法
-> 你可以写中划线

例如：

var style = window.getComputedStyle(div)
console.log(style['background-color'])

设置元素得样式
+ 只有一种方式
=> 设置元素得行内样式
=> 前端 JS 理论上是不可以设置元素得非行内样式
-> 如果你要修改非行内样式
-> 是需要修改 html 文件或者 css 文件得
-> 但是我们前端 JS 不能操作电脑上得文件
+ 设置行内样式
=> 语法: 元素.style.样式名 = '值'

 

扩展: 短路表达式
+ 什么情况用短路表达式兼容
=> 方法或者属性执行没有问题, 只是拿不到值得时候
+ 前提: 你的代码执行不能报错