HTML元素的style属性

  1. 通过getAttribute()、setAttribute()和removeAttribute()方法，直接读写删除元素的style属性

  2. style本身是一个对象，部署了CSSStyleDeclaration接口，可以直接读写属性

    1. e.style.fontSize = "18px";
    2. e.style.color = "yellow";

    CSSStyleDeclaration 接口

    简介

  3. 该接口用来操作元素的样式，共有三个地方部署了这个接口

  • 元素节点的style属性(Element.style)
  • CSSStyle实例的style属性
  • window.getComputedStyle()的返回值
  1. 该接口可以直接读写CSS的样式属性，但是连接号需要变成驼峰法

  2. Element.style只能返回行内样式；元素的全部样式需要window.getComputedStyle()来返回

    CSSStyleDeclaration实例属性

  3. cssText

  • 用来获取当前规则的所有的样式声明文本
  • 删除行内样式：divStyle.cssText = "";

    CSS侦测

  1. 判断元素的style对象的某个属性值是否为字符串

    1. typeof element.style.transform === "string";

    CSS.supports()

  2. 判断当前环境是否支持某一句CSS规则

    1. CSS.supports('transform-origin','5px');

    window.getComputedStyle()

  3. 该方法返回浏览器计算后得到的最终规则

  4. 接收一个节点为参数
  5. 返回一个CSSStyleDeclaration实例
  6. 该方法返回的CSSStyleDeclaration实例的cssText属性无效
  7. 该方法也可以接收第二个参数，表示当前元素的伪元素（比如：:before,:after,:first-line）等

    StyleSheet接口

    CSSStyleRule接口