利用DOM指令碼去設定樣式資訊:(by wushan)
在大多數場合,我們都用CSS去設定樣式,但在某些特殊情況下,例如要根據元素在節點樹裡的位置來設定節點樣式資訊時,目前CSS還沒辦法做到這一點。但利用DOM就可以很輕易的完成。
例如:把一定樣式施加到所有hl元素的下一兄弟節點(下一元素節點)上。這時候用CSS沒辦法確定位置,但用DOM的getElementsByTagName( )方法很容易就把所有hl元素後面的那個元素找出來,這時候只要對找出來的元素施加樣式就可以了。以下是程式碼清單:
複製程式碼 程式碼如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探測瀏覽器是否支援“getElementsByTagName”方法(個別瀏覽器並不支援DOM)
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
Weight=”bold”;
size=”1.2em”;
}
}
function getNextElement(node){
if(Type==1){ //此節點為文字節點
return node;
}
if(Sibling){
retnrn getNextElement(Sibling);
}
return null;
}
不足:讓“行為層”去完成“表現層”工作,當需要改變DOM指令碼設定的樣式資訊時,修改起來很麻煩,如果能給所要設定樣式的節點宣告一個class屬性,那麼修改起來就會很簡單。例如我們可以對上述例子做出如下修改:
複製程式碼 程式碼如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探測瀏覽器是否支援“getElementsByTagName”方法
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
sName=”intro”;
//給某元素設定class屬性值的語法為:sName=value
}
}
由於此技巧有一不足之處:若該元素原本具有class屬性值的話,那麼原本的屬性值就會被新的屬性值所覆蓋,原來的樣式就會丟失,所有我們要在元class屬性值的.基礎上追加新的屬性值,而不是覆蓋,方法如下:
複製程式碼 程式碼如下:
function addClass(element,value){
if(!sName){
sName=value;
}else{
newclassName=sName;
newclassName +=" "; // 注意這個空格
newclassName +=value;
sName=newclassName;
}
}
接著把上面的函式修改一下就可以了:
複製程式碼 程式碼如下:
function styleHeaderSibling( ){
if(!lementsByTagName) return false;
//探測瀏覽器是否支援“getElementsByTagName”方法
var headers=document. getElementsByTagName(“hl”);
for(var=0;i<th;i++){
var elem=getNextElement(headers[i]Sibling);
addClass(elem,”intro”);
}
}
說明:一般情況下,用DOM去設定樣式是很不明智的,此方法只在CSS沒辦法按要求設定樣式來充實頁面內容的時候才用。