DOM启蒙——第九章

1.CSS样式表

●通过使用HTMLLinkElement节点(如<link href=""style.css" rel="stylesheet">)引入外部样式表，或者使用HTMLStyleElement节点(如<style></style>)来定义内联样式表。

P.appendChild(document.createTextNode("<style>: "+document.querySelector("style").constructor));

P.appendChild(document.createTextNode("<link>: "+document.querySelector("link").constructor));

●一有样式表添加到HTML文档，它即表示为CSSStyleSheet对象，样式表里每条CSS规则都表示为一个CSSStyleRule对象。

P.appendChild(document.createTextNode(document.querySelector("style").sheet.constructor));

P.appendChild(document.createTextNode(document.querySelector("style").sheet.cssRules[0].constructor));

●选取引入样式表的元素<link>或者<style>与访问表示样式表自身的实际对象CSSStyleSheet是不同的。

2.访问DOM中所有样式表(CSSStyleSheet对象)

document.styleSheets提供了一个包含HTML文档中所有样式表对象(CSSStyleSheet对象)列表的访问方式，其中包括<link>和<style>.

而document.querySelector("link").sheet相当于document.styleSheets[0];

document.querySelector("style").sheet相当于document.styleSheets[1];

3.CSSStyleSheet属性与方法

继承属性:

 var inheritPro=[];

for(var x in stylesheet){

 if(!stylesheet.hasOwnProperty(x))

     inheritPro.push(x);

}

其中href、ownerNode.parentStyleSheet、title及type都是只读属性。

4.CSSStyleRule

CSSStyleRule对象代表了样式表中所含的每条CSS规则。

P.appendChild(document.createTextNode(stylesheet.cssRules[0].CSSText);

5.CSSStyleRule属性与方法

var inheritProper=[];

for(var p in a){

    if(!a.hasOwnProperty(p))

        inheritProper.push(p);

    }

cssRules对象提供cssText、parentRule、parentStyleSheet、selectorText、style、type属性

6.使用cssRules获取样式表内的CSS规则列表。

styleSheets列表提供了文档中所含样式表的清单，而cssRules列表提供了某个特定样式表的CSS规则，即CSSStyleRule对象组成的列表，即cssRulesList

document.querySelector("style").sheet.cssRules;//CSSRuleList

7.使用insertRule()和deleteRule()插入与删除样式表的CSS规则

stylesheet.insertRule("body{font-size:20px;}",1);//第二个参数为插入位置，从0开始

stylesheet.deleteRule(0);参数为删除位置。

8.使用.style属性修改CSSStyleRule的值

在CSSStyleRule对象上也有.style属性编排了样式表上做相同的操作。

document.querySelector("style").sheet.cssRules[0].style.color="red";

9.创建新的内联CSS样式表

HTML加载完毕后打造一个新的样式表需要创建一个新的<style>节点，使用innerHTML添加CSS规则到此节点，然后附加这个style节点到HTML文档中。

var styleEle=document.createElement("style");

styleEle.innerHTML="body{color:orange;}";

document.querySelector("head").appendChild(styleEle);

10.动态添加外部样式表到HTML文档

动态添加CSS文件到HTML文档需要创建link节点并添加适当属性附加到DOM，

var linkEle=document.createElement("link");

linkEle.setAttribute("rel","stylesheet");

linkEle.setAttribute("type","text/css");

linkEle.setAttribute("id","linkEle");

document.head.appendChild(linkEle);

11.使用disabled属性使样式表失效或生效

使用CSSStyleSheet对象的.disabled属性可以使样式表生效或者失效。

P.appendChild(document.createTextNode(linkEle.disabled));

document.querySelector("#linkEle").disabled=true;