JavaScript学习笔记：操作CSS

操作CSS类

Element对象的classList属性是一个DOMTokenList对象，它是一个类数组对象，可迭代；有可以像Set对象那样添加和移除元素。

ELement.classList.add('hidden');
Element.classList.remove('hidden');

计算样式

使用window.getComputedStyle()来获取元素的计算样式，它是一个只读的CSSStyleDeclaration对象。
它的CSS属性值经过计算，转换特定格式的绝对值。比如百分比的距离转换为单位为像素的绝对数值，16进制颜色值转换为rgb()或rgba()格式。未主动设置的CSS样式将设置为默认值。
计算样式对象的cssText属性是undefined。
需要注意的是，诸如margin、border-width、padding、background等简写名称只在部分浏览器得到支持，为了兼容性，应使用具体的CSS属性名，如margin-top、border-top-width等。

document.body.style.cssText = 'background-color: black; margin: 20%';
console.log(window.getComputedStyle(document.body)['background-color'],
  window.getComputedStyle(document.body).marginTop); // rgb(0, 0, 0) 270px

操作行内样式

行内样式指得是定义在HTML标签的style属性上的CSS样式。
Element对象上的style属性对应着HTML元素的style属性，但是它不是字符串，而是一个CSSStyleDeclaration对象，该对象是将HTML的style属性解析后得到的。
通过对该对象上特定的属性赋值来动态地改变CSS样式，对象属性与CSS属性的对应规则是单个单词一样，连字符分隔的多个单词会剔除连字符并将连字符后面的字母大写。
需要注意的是，若CSS属性的值有单位，给对象的属性赋值时也要有。

Element.style.background = "#009688";
Element.style.marginLeft = '12px';

使用Element元素的getAttribute()与setAttribute()方法以字符串的格式来读写元素的行内样式。

Element.getAttribute('style');
Element.setAttribute('style', 'background: #009688');

另外CSSStyleDeclaration对象的cssText属性也是一个表示元素行内属性的可读写的字符串：

Element.style.cssText = "background: pink";

元素的style属性代表的是元素的行内样式，而更多时候CSS是定义在样式表中的。同样的CSS属性，行内样式的定义是优先于样式表的定义的，除非使用!important来提升样式的优先级。

操作CSS样式表

CSS样式表是通过<style>\或<link rel="stylesheet">\来与HTML文档关联的。
这两个标签对应的DOM元素都有一个disabled属性，设置为true可以禁用该样式表。
要操作css样式表具体的内容，要使用StyleSheet对象，该对象从document.styleSheets指向的StyleSheetList对象获取，它是一个类数组的可迭代对象。
StyleSheet对象有一个ownerNode对象，指向将样式表与HTML文档关联起来的节点，是<style>或<link>标签对应的节点。可以用该属性确定要操作的样式表。

for (let s of document.styleSheets ) {
    if (s.id == 'bootstrap') {
      s.disaled = true;
      break;
    }
}

CSS动画与事件

CSS中的动画分为过渡动画与帧动画，浏览器在它们执行时派发不同的事件。

• 过渡动画
  CSS中的过渡动画使用transition属性定义：

  opacity: 0;
  transition: opacity 1s ease-in;
  

  给透明变化应用过渡动画，持续时间为1s，先快后慢。
  在首次触发过渡时，浏览器派发“transitionrun”事件；
  在动画开始执行时，浏览器派发“transitionstart”事件；
  在动画执行完毕时，浏览器派发“transitionend”事件；
  事件目标是发生动画的元素。

• 关键帧动画
  在CSS中，使用@keyframes来定义关键帧动画。它的原理是将当前CSS样式逐渐变化为另一套样式。
  使用animation来应用动画。

  .box {
    width:100px;
    height:100px;
    background-color: #0088ff;
    position: relative;
    margin: auto;
    animation: move 1.75s infinite linear;
  }
  @keyframes move {
    0% {top: 0px;}
    25% {top: 200px;}
    50% {top: 100px;}
    75% {top: 200px;}
    100% {top: 000px;}
  }
  

  动画开始时，触发animationstart事件;
  结束时，触发animationend事件;
  在动画重复播放时，除最后一次外，每次重复都触发animationiteration事件，不重复不触发。