通過DOM腳本去設置樣式信息

2019-11-21 00:13:39

字體：大中小

來源：轉載

供稿：網友

利用DOM腳本去設置樣式信息：（by wushan）
在大多數場合，我們都用CSS去設置樣式，但在某些特殊情況下，例如要根據元素在節點樹里的位置來設置節點樣式信息時，目前CSS還沒辦法做到這一點。但利用DOM就可以很輕易的完成。
例如：把一定樣式施加到所有hl元素的下一兄弟節點（下一元素節點）上。這時候用CSS沒辦法確定位置，但用DOM的getElementsByTagName( )方法很容易就把所有hl元素后面的那個元素找出來，這時候只要對找出來的元素施加樣式就可以了。以下是代碼清單：

復制代碼代碼如下:

 
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探測瀏覽器是否支持“getElementsByTagName”方法(個別瀏覽器并不支持DOM) 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
elem.style.fontWeight=”bold”; 
elem.style.fontsize=”1.2em”; 
　　} 
} 
function getNextElement(node){ 
if(node.nodeType==1){ //此節點為文本節點 
return node; 
　　 } 
　　if(node.nextSibling){ 
　　retnrn getNextElement(node.nextSibling); 
　 } 
return null; 
} 

不足：讓“行為層”去完成“表現層”工作，當需要改變DOM腳本設置的樣式信息時，修改起來很麻煩，如果能給所要設置樣式的節點聲明一個class屬性，那么修改起來就會很簡單。例如我們可以對上述例子做出如下修改：

復制代碼代碼如下:

 
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探測瀏覽器是否支持“getElementsByTagName”方法 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
elem.className=”intro”; 
//給某元素設置class屬性值的語法為：elements.className=value 
} 
} 

由于此技巧有一不足之處：若該元素原本具有class屬性值的話，那么原本的屬性值就會被新的屬性值所覆蓋，原來的樣式就會丟失，所有我們要在元class屬性值的基礎上追加新的屬性值，而不是覆蓋，方法如下：

復制代碼代碼如下:

 
function addClass(element,value)｛ 
if(!element.className){ 
element.className=value; 
　　 }else{ 
newclassName=element.className; 
newclassName +=" "; // 注意這個空格 
newclassName +=value; 
element.className=newclassName; 
　　} 
｝ 

接著把上面的函數修改一下就可以了：

復制代碼代碼如下:

 
function styleHeaderSibling( ){ 
if(!document.getElementsByTagName) return false; 
//探測瀏覽器是否支持“getElementsByTagName”方法 
var headers=document. getElementsByTagName(“hl”); 
for(var=0;i<headers.length;i++){ 
var elem=getNextElement(headers[i].nextSibling); 
addClass(elem,”intro”); 
　　} 
} 

說明：一般情況下，用DOM去設置樣式是很不明智的，此方法只在CSS沒辦法按要求設置樣式來充實頁面內容的時候才用。

上一篇：用js模擬JQuery的show與hide動畫函數代碼

下一篇：javscript對象原型的一些看法