MozTW 討論區 • 檢視主題 - DOM與CSS的互動問題

所有顯示的時間為 UTC + 8 小時

DOM與CSS的互動問題

第 1 頁 (共 1 頁)

[ 2 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

BabySatan

文章主題 : DOM與CSS的互動問題

發表於 : 2006-10-22, 14:54

註冊時間: 2004-08-30, 11:30
文章: 67

由於想取得網頁中物件的某些屬性
首選當然是使用DOM啦
但若物件的屬性是由CSS來指定的似乎就會是空值
例如我想取得物件的背景顏色：

test.css

代碼:

TR
{
   background-color : #808080;
}

TR:hover
{
   background-color : #C0C0C0;
}

.r
{
   background-color : #FF0000;
}

.g
{
   background-color : #00FF00;
}

.b
{
   background-color : #0000FF;
}

test.html

代碼:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN'>
<HTML>
   <HEAD>
      <TITLE>
         getBackgroundColor
      </TITLE>
      <LINK REL='STYLESHEET' TYPE='TEXT/CSS' HREF='test.css'>
      <SCRIPT TYPE='TEXT/JavaScript'>
         function MOver(ID)
         {
            var tempTR=document.getElementById(ID);
            alert(tempTR.style.backgroundColor+':'+tempTR.getAttribute('BGCOLOR'));

            return;
         }
      </SCRIPT>
   </HEAD>
   <BODY BGCOLOR='#FFFFFF'>
      <TABLE>
         <TR ID='TR0' onMouseOver=MOver(this.id)>
            <TH>行號</TH><TH>名稱</TH><TH>說明</TH>
         </TR>
         <TR ID='TR1' CLASS='r' onMouseOver=MOver(this.id)>
            <TD>1</TD><TD>Red</TD><TD>紅</TD>
         </TR>
         <TR ID='TR2' CLASS='g' onMouseOver=MOver(this.id)>
            <TD>2</TD><TD>Green</TD><TD>綠</TD>
         </TR>
         <TR ID='TR3' CLASS='b' onMouseOver=MOver(this.id)>
            <TD>3</TD><TD>Blue</TD><TD>藍</TD>
         </TR>
      </TABLE>
   </BODY>
</HTML>

這樣子彈出的alert中所顯示的值
Firefox是:null
IE是:
也就是空值
除非要先指定element.style.backgroundColor的值之後
才不會取得空值
例如

代碼:

<SCRIPT TYPE='TEXT/JavaScript'>
   tempTR=document.getElementById('TR1');
   tempTR.style.backgroundColor='#FFFFFF';
   alert(tempTR.style.backgroundColor);
</SCRIPT>

那這樣一來用CSS指定顏色不就失去意義了嗎？Orz

有沒有什麼方法可以讓CSS指定的屬性可以透過DOM讀取的？
先感謝大家的回覆囉~^^

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.0; zh-TW; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

Amauds

文章主題 :

發表於 : 2006-10-22, 18:55

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan

BabySatan 寫:

由於想取得網頁中物件的某些屬性
首選當然是使用DOM啦
但若物件的屬性是由CSS來指定的似乎就會是空值
除非要先指定element.style.backgroundColor的值之後
才不會取得空值
那這樣一來用CSS指定顏色不就失去意義了嗎？Orz
有沒有什麼方法可以讓CSS指定的屬性可以透過DOM讀取的？
先感謝大家的回覆囉~^^

依據元素 className 進行操作，當然得先會控制 StyleSheet 物件。
若沒有指定 class，則用元素 ID 來進行 css 屬性值控制或取得。

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴；其實從未曾真實的存在過。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7

第 1 頁 (共 1 頁)

[ 2 篇文章 ]

MozTW » 討論區首頁 » 特別議題 » 問題網站與網頁技術傳教

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 10 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :