学习CSSOM

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zgrbsbf/article/details/86174475

通过element.style访问或者设置行内样式

 div {
      width: 100px;
      height: 100px;
      background-color: rgb(255, 255, 0);
    }
   // 下面是div的结构
   <div>
  我是div里面的内容哦
</div> 

div只是通过style标签设置了样式，背景色初始时是黄色，

行内样式基本都可以这样设置或者获取，但是有个例外，就是float属性，我测试的结果是style.float和style.cssFloat都可以：

CSSStyleDeclaration相关API

不常用，
setProperty(), getPropertyValue(), item(), removeProperty()

使用getComputedStyle获取计算后的样式

很多时候我们更加在意的并不是元素的行内样式，而是这元素真正展示在页面上的时候的样式，这些有的是继承的，有的是默认的，就像在谷歌浏览器调试窗口看到的：

window.getComputedStyle()方法可以获取任何CSS属性，如上图所示，可以获取到元素的真是的样式。

三种使用方法

使用getComputedStyle获取伪元素(Pseudo-Element)的样式

element.style这个方法是获取不到伪类元素的样式的，毕竟element也没法被赋值成一个伪类元素。但是getComputedStyle可以，他的语法是这样的：

window.getComputedStyle(element [, pseudoElt]);

demo0

我们给div加上一个伪类：

div::before{
      content: '我是before';
      display:block;
      background-color: red;
}

未完，待续

参考文献：
https://css-tricks.com/an-introduction-and-guide-to-the-css-object-model-cssom/