yuque_diagram.jpg

目的

学习了如何获取和设置元素的样式，就可以动态的设置元素的任何样式了。
这部分知识是做网页特效的基础。
比如轮播图，其实修改的就是元素的 left 样式，通过left值的改变，让图片移动
比如tab栏切换效果，下拉菜单等等，都需要修改元素的样式才能实现。

设置元素的样式

语法：

  1. 元素.style.样式名称 = '值'
  3. 如果 样式名称 带有中横线，则去掉中横线，将中横线后面的字母变为大写（小驼峰法）
  4. 比如：
  5. 元素.style.backgroundColor = 'red'
  6. 元素.style.fontSize = '20px'

如果元素开始有一些样式，但是JS中设置的样式优先级最高。

获取元素的样式

语法：

  1. window.getComputedStyle(元素).样式名称
  3. 比如，获取div的宽度、高度、背景颜色
  4. let div = document.querySelector('div')
  6. let w = window.getComputedStyle(div).width  // 100px
  7. let h = window.getComputedStyle(div).height // 100px
  8. let bgcolor = window.getComputedStyle(div).backgroundColor  // red

操作元素的类名

上述通过 元素.style.样式名称 = '值' 修改元素的样式，一次只能修改一个。
如果批量的修改元素的样式，则可以通过修改类名来实现。

className

获取元素的类名：

  1. let a = 元素.className
  2. console.log(a) // 'aa bb cc'  得到一个字符串，里面包括元素的所有类名

修改元素的类名：

  1. 元素.className = '新的值'
  3. 比如：
  4. 元素.className = 'aa'  // 将元素的class修改为 aa
  5. 元素.className = 'aa bb'  // 将元素的class属性修改为 aa bb

设置元素的类名后，会把元素原有的类名全部覆盖掉。

classList（重点）

获取元素的类名：

  1. let b = 元素.classList
  2. console.log(b) // { 0: 'aa', 1: 'bb', length: 2, value: 'aa bb' }  得到这样的伪数组

增加一个新的类名：

  1. 元素.classList.add('新的类名')
  2. 元素.classList.add('类名', '类名', '类名')

移除一个类名：

  1. 元素.classList.remove('类名')
  2. 元素.classList.remove('类名', '类名', ......)

切换一个类名：

  1. 元素.classList.toggle('类名')
  2. // 切换的意思是，如果元素有这个类名则移除它；如果元素没有这个类名则添加它