CSS与JS是两个有着明确分工的领域,前者负责页面的视觉效果,后者负责与用户的行为互动。但是,它们毕竟同属网页开发的前端,因此不可避免有着交叉和互相配合。本节介绍如何通过JS操作CSS。
一、Style属性
操作CSS样式最简单的方法,就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法,直接读写或删除网页元素的style属性。
div.setAttribute('style', b);
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对象代表网页的一张样式表,它包括节点加载的样式表和