CSS与JS是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如何通过JS操作CSS。
一、Style属性
操作CSS样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。
div.setAttribute('style', b);
<div style="background-color:red; border:1px solid black;" ></div>
1.1、Style对象
每一个网页元素对应一个DOM节点对象。这个对象的style属性可以直接操作，用来读写行内CSS样式。
1.2、cssText属性
元素节点对象的style对象，有一个cssText属性，可以读写或删除整个样式。
注意，cssText的属性值不用改写CSS属性名。
1.3、CSS模块的侦测
1.4、setProperty()，getPropertyValue()，removeProperty()
Style对象的以下三个方法，用来读写行内CSS规则。
- setProperty(propertyName, value)：设置某个CSS属性
- getPropertyValue(propertyName)：读取某个CSS属性
- removeProperty(propertyName)：删除某个CSS属性
这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。
二、window.getComputedStyle()
行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素现有的样式，只读取行内样式是不够的，我们需要得到浏览器最终计算出来的那个样式规则。
window.getComputedStyle方法，就用来返回这个规则。它接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。
三、CSS伪元素
四、StyleSheet对象
4.1、获取样式表
StyleSheet对象代表网页的一张样式表，它包括<link>节点加载的样式表和<style>节点内嵌的样式表。
document对象的styleSheet属性，可以返回当前页面的所有StyleSheet对象（即所有样式表）。它是一个类似数组的对象。
4.2、属性
StyleSheet对象有以下属性。
（1）、media属性
media属性表示这个样式表用于屏幕（screen），还是用于打印（print），或两者都适用（all）。该属性只读，默认值是screen。
document.styleSheet[0].media.mediaText
（2）、disabled属性
disabled属性用于打开或关闭一张样式表。
一旦样式表设置了disabled属性，这张样式表就将失效。
（3）、href属性
href属性是只读属性，返回StyleSheet对象连接的样式表地址。对于内嵌的<style>节点，该属性等于null。
（4）、title属性
title属性返回StyleSheet对象的title值。
（5）、type属性
type属性返回StyleSheet对象的type值，通常是text/css。
document.styleSheets[0].type
// "text/css"
（6）、parentStyleSheet属性
（7）、ownerNode属性
ownerNode属性返回StyleSheet对象所在的DOM节点，通常是<link>或<style>。对于那些由其他样式表引用的样式表，该属性为null。
（8）、cssRules属性
4.3、insertRule()，deleteRule()
insertRule方法用于在当前样式表的cssRules对象插入CSS规则，deleteRule方法用于删除cssRules对象的CSS规则。
4.4、添加样式表
添加样式表有两种方式。一种是添加一张内置样式表，即在文档中添加一个<style>节点。
另一种是添加外部样式表，即在文档中添加一个<link>节点，然后将href属性指向外部样式表的URL。
五、CSS规则
一条CSS规则包括两个部分：CSS选择器和样式声明。下面就是一条典型的CSS规则。
.myClass {
background-color: yellow;
}
5.1、CSSRule接口
CSS规则部署了CSSRule接口，它包括了以下属性。
网友评论