利用DOM腳本去設(shè)置樣式的特殊情況

利用DOM腳本去設(shè)置樣式的特殊情況

　　利用DOM腳本去設(shè)置樣式信息：（by wushan）

　　在大多數(shù)場合，我們都用CSS去設(shè)置樣式，但在某些特殊情況下，例如要根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置節(jié)點(diǎn)樣式信息時(shí)，目前CSS還沒辦法做到這一點(diǎn)。但利用DOM就可以很輕易的完成。

　　例如：把一定樣式施加到所有hl元素的下一兄弟節(jié)點(diǎn)（下一元素節(jié)點(diǎn)）上。這時(shí)候用CSS沒辦法確定位置，但用DOM的getElementsByTagName( )方法很容易就把所有hl元素后面的那個(gè)元素找出來，這時(shí)候只要對找出來的元素施加樣式就可以了。以下是代碼清單：

　　復(fù)制代碼 代碼如下:

　　function styleHeaderSibling( ){

　　if(!document.getElementsByTagName) return false;

　　//探測瀏覽器是否支持“getElementsByTagName”方法(個(gè)別瀏覽器并不支持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){ //此節(jié)點(diǎn)為文本節(jié)點(diǎn)

　　return node;

　　}

　　if(node.nextSibling){

　　retnrn getNextElement(node.nextSibling);

　　}

　　return null;

　　}

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

　　復(fù)制代碼 代碼如下:

　　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”;

　　//給某元素設(shè)置class屬性值的語法為：elements.className=value

　　}

　　}

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

　　復(fù)制代碼 代碼如下:

　　function addClass(element,value)｛

　　if(!element.className){

　　element.className=value;

　　}else{

　　newclassName=element.className;

　　newclassName +=" "; // 注意這個(gè)空格

　　newclassName +=value;

　　element.className=newclassName;

　　}

　　｝

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

　　復(fù)制代碼 代碼如下:

　　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去設(shè)置樣式是很不明智的，此方法只在CSS沒辦法按要求設(shè)置樣式來充實(shí)頁面內(nèi)容的時(shí)候才用。

【利用DOM腳本去設(shè)置樣式的特殊情況】相關(guān)文章：

word頁碼樣式怎么設(shè)置09-13

cad建筑標(biāo)注樣式如何設(shè)置08-10

CAD里墻的樣式如何設(shè)置09-24

word文檔怎么去設(shè)置行距02-17

如何利用SEO技術(shù)設(shè)置文章網(wǎng)頁標(biāo)題10-01

AutoCAD腳本制作10-27

jQuery的DOM操作筆記07-29

調(diào)酒有哪些樣式-調(diào)酒樣式03-20

影視廣告的腳本創(chuàng)作08-26

關(guān)于BOM與DOM的區(qū)別的分析09-04