JavaScript权威指南读书笔记——第十六章 脚本化CSS

脚本化内联样式

脚本化CSS最直截了当的方法就是更改单独的文档元素style属性。style也是元素对象的属性，也可以在JavaScript中操作。style属性不是一个字符串，而是一个CSSStyleDeclaration对象。该style对象的JavaScript属性代表了HTML代码中通过style指定的CSS属性。

e.style.fontSize="24px";
e.style.fontWeifht="bold";
e.style.color="blue";

查询计算出的样式

用浏览器窗口的getComputedStyle()方法来获得一个计算样式。此方法的第一个参数就是要获取其计算样式的元素，二哥参数也是必须的，通常是null或空字符串。

getComputedStyle()方法的放回值的一个CSSStyleDeclaration对象，它代表了应用在指定元素上的所有样式。和表示内联样式的对象之间的区别。

• 计算样式的属性是只读的。
• 计算样式的值是绝对值：类似百分比和点之类相对的单位将全部转换为绝对值。所有指定尺寸的属性都有一个以像素为度量单位的值。其值是演示的属性将以“rgb(#,#,#)”或”rgba(#,#,#,#)”的格式返回
• 不计算复合属性，它们只基于最基础的属性。
• 计算样式的cssText属性未定义

脚本化CSS

脚本化CSS最好的操作方式就算设置其类名，HTML标签的class属性，也就是元素的className。

HTML5为每一个元素定义了classList属性，其实也就是为了方便className的操作。add()和remove()从元素的class属性中添加和清除一个类名。toggle()表示如果不存在类名就添加一个；否则，删除它。最后contains()方法检测class属性是否包含一个指定的类名。

脚本化样式表

开启和关闭样式表

<style>、<link>元素的CSSStyleSheet对象都定义了一个在JavaScript中可以设置和插叙你的disabled属性。如果disabled顺序为true，样式表被浏览器关闭并忽略。

查询、插入与删除样式表规则

document.styleSheets[]数组的元素是CSSStylesheet对象。CSSStylesheet对象有一个cssRules[]数组，它包含样式的所有规则。

selectorText是规则的CSS选择器，它引用一个描述与选择器的相关的样式的可写CSSStyleDeclaration对象。

insertRule()、deleteRule()，IE不支持这两个，但定义了等效的addRule()和removeRule()

insertRule(“#id {样式}”,插入的位置);
deleteRule(index)

addRule(“#id”,”样式”,插入的位置)
removeRule(i)

创建新样式表

只要创建一个全新的<style>元素，将其插入到文档头部，然后勇气innerHTML属性设置样式表内容。

CSSStyleSheet对象也可通过非标准的方法document.createStyleSheet()方法来创建，其样式文本用cssText属性来指定。