MozTW 討論區
https://forum.moztw.org/

DOM與CSS的互動問題
https://forum.moztw.org/viewtopic.php?f=13&t=15974		 第 1 頁 (共 1 頁)
發表人:  BabySatan [ 2006-10-22, 14:54 ]
文章主題 :  DOM與CSS的互動問題
由於想取得網頁中物件的某些屬性
首選當然是使用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讀取的？
先感謝大家的回覆囉~^^
發表人:  Amauds [ 2006-10-22, 18:55 ]
文章主題 : 
BabySatan 寫:
由於想取得網頁中物件的某些屬性
首選當然是使用DOM啦
但若物件的屬性是由CSS來指定的似乎就會是空值
除非要先指定element.style.backgroundColor的值之後
才不會取得空值
那這樣一來用CSS指定顏色不就失去意義了嗎？Orz
有沒有什麼方法可以讓CSS指定的屬性可以透過DOM讀取的？
先感謝大家的回覆囉~^^

依據元素 className 進行操作，當然得先會控制 StyleSheet 物件。
若沒有指定 class，則用元素 ID 來進行 css 屬性值控制或取得。
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/