JavaScript DOM進階程式設計 5動態修改樣式和層疊樣式表1（原始碼）–我要堅持到底！

W3C DOM2樣式規範

現在這邊貼出本章要的原始碼，注意要結合前面用到的ADS庫http://vdisk.weibo.com/s/Dq8NU

•  CSSStyleSheet對象屬性：

1. type ：始終是txt/css
2. disabled：是否被禁用
3. href URL
4. title ：分組樣式表的標籤
5. media：樣式表應用的目標裝置類型，如screen、print
6. ownerRule ： 制度的CSSRule對象，如果樣式表是使用@import等類似方式匯入的，該屬性即表示其父規則
7. inserRule(rule,index)： 用於添加新的樣式聲明
8. deleteRule(index):從示範表中移出規則

• CSSStyleRule對象屬性：

1. type 繼承自CSSRule對象的一個屬性
2. cssText
3. parentStyleSheet
4. parentRule
5. selectorText　
6. style

• CSSStyleDeclaration對象屬性：

1. cssText
2. parentRule
3. getPropertyValue
4. removeProperty(propertyName)
5. removeProperty(propertyName)
6. setProperty(propertyName,value,priorty)

當DOM指令碼遇到樣式

• 為應用樣式而改動標記

　　我們最終的標記應該是：

1. 對螢幕助讀程式而言是可訪問的
2. 當禁用映像而CSS有效時是可以理解的
3. 維護與訪問性相關的特性，如alt和title屬性。
4. 避免使用不必要的標記--如果可能的話　

 CSS映像替換經典技術為FIR

<h2 id="advancedHeader"><span>Advanced DOM Scripting</span></h2>

 

/* 為父元素添加背景映像*/#advancedHeader {    border: 0; padding: 0; /* remove styleing from other style sheets */    height:60px;    background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;}/* 隱藏文本 */#advancedHeader span {    display:none;}

　　但是這種方法存在兩個問題：

1. 如果禁用映像，則什麼都不會顯示，因為span仍舊被隱藏著
2. display:none屬性會對支援CSS的螢幕助讀程式隱藏內容，從而完全破壞了推昂替換中的可訪問性原則

Dwyer方法（使用0尺寸的附加span標籤，但是它在CSS有效而凸顯禁用的情況下仍然不具有可訪問性）

/* 為父元素添加背景映像*/#advancedHeader {    border: 0; padding: 0; /* remove styleing from other style sheets */        height:60px;    background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;}/*使用0尺寸的盒子隱藏文本*/#advancedHeader span {    display:block;    width:0;    height:0;    overflow:hidden;}

Phark方法（不需要額外的標籤，而是使用負文本縮排來隱藏內容， 但是這種方法在CSS有效而映像被禁用的情況下還是會損壞可訪問性）

/* 使用背景映像和負文本縮排隱藏文本 */#advancedHeader {    border: 0; padding: 0; /* remove styleing from other style sheets */    text-indent: -100em;    overflow:hidden;    height:60px;    background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;}

應外一種方法Shea方法仍然附加了<span>

<h2 id="advancedHeader" title="Advanced DOM Scripting">    <span></span>Advanced DOM Scripting</h2>

但是這個方法沒有隱藏文本，而是將帶有實心不透明的背景映像的<span>元素，定位在了文本的上方，從而達到了遮蓋文本的目的

/*父元素使用想對定位，子項目使用絕對位置*/ #advancedHeader {    border: 0; padding: 0; /* remove styleing from other style sheets */    height:60px;    position:relative;}/* 通過在絕對位置的span元素上使用不同命的畢竟隱藏文本 */#advancedHeader span {    background: transparent url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;    display:block;    width:100%;    height:100%;    position:absolute;}

• 去掉額外的標記

/*映像被禁用的情況下為文本添加的樣式 */#advancedHeader {    color: #1A5B9D;}/* 根據映像設定標題的大小*/#advancedHeader.advancED {    border:0; padding: 0;     height:60px;     position:relative;     overflow:hidden;}/* 使用不透明映像隱藏文本*/#advancedHeader.advancED span {    background: white url(http://advancedDOMScripting.com/images/advancED-replace.png) no-repeat;    display:block;    width:100%;    height:100%;    position:absolute;}

為了讓頁面更加有吸引力，在load事件會向標題元素加入額外的<span>標籤，以及額外的.advanceED類名：

ADS.addEvent(window, 'load', function() {    // 取得標題    var header = ADS.$('advancedHeader');    //建立映像元素    var image = document.createElement('IMG');        //當映像載入成功後在添加span和類名    ADS.addEvent(image, 'load', function() {            var s = document.createElement('SPAN');        // 將span添加為標題的子項目        ADS.prependChild(header,s);                // 建立必要的title屬性        if(!header.getAttribute('title')) {            var i, child;            var title = '';            //迴圈遍曆子項目以組合title屬性            for(i=0 ; child = header.childNodes[i] ; i++ ) {                if(child.nodeValue) title += child.nodeValue;            }            header.setAttribute('title',title);        }        // 修改類名稱以標明變更並應用CSS        header.className = 'advancED';    });        // 載入映像    // 這種硬式編碼方式並不理想    // 本意後面還將討論這點    image.src = 'http://advancedDOMScripting.com/images/image-replace.png';});

添加額外得累對於頁面退化和保持整潔非常重要

另外說一句。其實本章我看的也是迷迷糊糊^ ^;