資訊專欄INFORMATION COLUMN
摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。
前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。
－－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－－－－－
1.className屬性前兩篇一直是用DOM直接設置或者修改CSS樣式，這屬于讓js的“行為層”干CSS“表示層”活，試想，一旦你要再次修改由DOM腳本設置的樣式，就需要在js代碼中各種一通找，很麻煩并且如果代碼較多的時候你或許會瘋掉。
一個思考：為什么不用js直接更改元素節點的class類名選擇器呢？
甚至你都不用在HTML中事先布置好這個class類名選擇器，因為className屬性是一個可讀／可寫的屬性，如果元素節點事先沒有定義一個class類名選擇器，直接寫ele.calssName ＝ "你設置的類選擇器名"會直接為元素節點添加class類名選擇器，從而實現更改元素節點的樣式。
所以就會出現這種方案：只需要在CSS中添加一個特定的類名選擇器定義樣式，用js代碼直接操作這個class選擇器賦值給HTML中的某個節點。當想改變這個節點的樣式時，不用在js代碼中找尋，只需要在CSS中直接改成你想要的樣式就ok了。
2.一個Demo多說無益，還是上代碼來得實在
還記得《DOM編程藝術》中CSS—DOM的總結（一）中那個無聊的“根據元素在節點樹里的位置來設置樣式”的Demo吧？現在可以用className屬性直接更改樣式了。
（1）HTML部分-沒有變化（2）CSS部分－添加一個class選擇器Hold the page
第一段寫點什么呢？
我來講一段故事：從前有座山，山里一個廟...
別走啊！！！最精彩的還在后面，旁邊有一座尼姑庵...
還有！?。∵€有?。?！
你聽我講，慢慢聽我講，這個故事很精彩
你可以評論我的文章，我告訴你后續故事，真的很精彩，不騙你。
.intro{
font-weight:bold;
dont-size:20px;
}
（3）js代碼部分－對styleHeaderSiblings函數進行一些改造
此時不直接用elem.style.fontWeight更改樣式，而是在遍歷到每一個h1緊鄰著的p標簽之后，直接為其添加class屬性選擇器，并且把這個屬性指定為第（二）步中添加的CSS樣式。
function styleHeaderSiblings(){
if(!document.getElementsByTagName){
return false;
}
var headers = document.getElementsByTagName("h1");
var elem;
for(var i = 0; i
其他的函數都沒有做改變，現在如果想再次更改樣式，只需要在CSS中更改樣式就OK了。
3.對函數進行抽象
再來看看styleHeaderSiblings函數，這個函數僅僅適用于h1元素，className屬性值"intro"都是硬編碼在函數中，所以沒有通用性，所以需要對這個函數進行一些抽象，從而讓它的用途更廣泛。
（1）首先增加兩個參數
function styleElementSiblings(tag,theclass)
第一個參數tag代表你想要替換的元素節點，本例是根據位置更換樣式，特殊情況所以是h1，而不是緊跟著的p標簽。
第二個參數theclass代表你想為元素節點更換的class類名選擇器，本例是"intro"
抽象前：
function styleHeaderSiblings(){
if(!document.getElementsByTagName){
return false;
}
var headers = document.getElementsByTagName("h1");
var elem;
for(var i = 0; i
（2）抽象出一個addClass函數
由于className屬性直接就更改了class類名選擇器，所以如果元素事先設置了class類名選擇器，原有的樣式會失效，所以需要再次抽象一個添加className的函數，取名叫addClass，有兩個參數，一個是目標元素element（本例中這次是p標簽），一個是值value（本例中是"intro"）
如果元素沒有class屬性選擇器，就把value值直接賦給它
如果有，就加個空格，再給它追加一個class類選擇器
抽象后
function addClass(element,value){
if(!element.className){
element.calssName = value;
}else{
newClassName = element.className;
newClassName = " ";
newClassName += value;
element.className = newClassName;
}
}
function styleHeaderSiblings(tag,theclass){
if(!document.getElementsByTagName){
return false;
}
var elems = document.getElementsByTagName("tag");
var elem;
for(var i = 0; i
4.完整源碼
老規矩了，上源碼～～～歡迎留言拍磚評論交流～～～～
exampl
Hold the page
第一段寫點什么呢？
我來講一段故事：從前有座山，山里一個廟...
別走啊！?。∽罹实倪€在后面，旁邊有一座尼姑庵...
還有！??！還有?。?！
你聽我講，慢慢聽我講，這個故事很精彩
你可以評論我的文章，我告訴你后續故事，真的很精彩，不騙你。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111291.html
摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...
摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。 前言：接上篇，本篇有兩個內容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始?。?！ －－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....
摘要：部分這是一個表格月日北京路號人民廣場月日南京路號人民博物館月日上海路號人民藝術中心部分要美觀，還是稍微寫點樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對做樣式修改。 前言：接上篇，本篇有兩個內容：一個是Demo：當鼠標hover到表格的一行上時這行表格字體加粗。。。好了，廢話少說，開始?。?！ －－－－－－－－－－－－－－－－－－嚴肅的分割線－－－－－－－－－－－－－－－－－－ 1....
摘要：前言前面是純總結，后面實現了一個用改變樣式的。開始元素節點的屬性文檔中每個元素節點都有一個屬性，屬性包含著元素的樣式，查詢這個這個屬性將會返回一個對象，節點對應的樣式都存放在這個屬性里。 前言：前面是純總結，后面實現了一個用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節點的style屬性 HTML文檔中...
摘要：前言前面是純總結，后面實現了一個用改變樣式的。開始元素節點的屬性文檔中每個元素節點都有一個屬性，屬性包含著元素的樣式，查詢這個這個屬性將會返回一個對象，節點對應的樣式都存放在這個屬性里。 前言：前面是純總結，后面實現了一個用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節點的style屬性 HTML文檔中...
閱讀 1290·2021-11-24 09:39
閱讀 2632·2021-09-30 09:47
閱讀 1325·2021-09-22 15:15
閱讀 2410·2021-09-10 10:51
閱讀 1954·2019-08-30 15:55
閱讀 2977·2019-08-30 11:06
閱讀 896·2019-08-30 10:53
閱讀 830·2019-08-29 17:26
