<HTML>
<HEAD>
<TITLE>CSS+JS控制文字</TITLE>
</HEAD>
<BODY>
<STYLE>
BODY {font-size: 8pt; font-family: Arial;}
.datahead {font-size: 8pt; font-family: Arial; background-color: #505050; color: #FFFFFF; border: "1 solid"; border-top-color: "#909090"; border-left-color: "#909090"; border-right-color: "#303030"; border-bottom-color: "#303030";}
.dataitem {font-size: 8pt; font-family: Arial; background-color: #C0C0C0; color: #000000; border: "1 solid"; border-top-color: "#CFCFCF"; border-left-color: "#CFCFCF"; border-right-color: "#505050"; border-bottom-color: "#505050";}
</STYLE>
<SCRIPT>
function fnSetData(){
for(var i=1;i<oData.rows.length;i++)
{
var oWorkRow=oData.rows(i);
oWorkRow.cells(1).innerText=eval("oScratch.style." + oWorkRow.cells(0).innerText);
oWorkRow.cells(2).innerText=eval("oScratch.runtimeStyle." + oWorkRow.cells(0).innerText);
oWorkRow.cells(3).innerText=eval("oScratch.currentStyle." + oWorkRow.cells(0).innerText);
}
}
function fnChangeStyle(oStyle,sValue){
if(sValue.indexOf("CLEAR")>-1){
sValue="";
}
eval("oScratch.runtimeStyle." + oStyle + "='" + sValue + "'");
fnSetData();
}
function fnInit(){
fnSetData();
}
window.onload = fnInit;
</SCRIPT>
<H1>樣式表控制相應文字</H1>
<DIV ID="oScratch" STYLE="border: '5 solid'; border-color: #101010; background-color: #CFCFCF; color: #000000; font-size: 12pt; font-family: 'Arial';"> 海灣戰爭以前，海珊在不少阿拉伯人，特別是巴勒斯坦人眼中是頭“雄獅”，似乎只有他才能帶領阿拉伯兄弟擊敗以色列並解放被佔領土。人們希望海珊能讓貌合神離的阿拉伯國家重新團結一心，然後利用伊拉克豐富的石油資源來建設一個現代化強國。然而，十多年過去了，人們對海珊的期望逐漸消失了，許多巴勒斯坦難民對記者表示，這位伊拉克領導人沒有信仰，每天要做的事情僅僅是思考如何保住自己的統治地位。當年，他們曾為海珊向以色列發射的39枚“飛毛腿”飛彈而歡欣鼓舞，並認為自己“翻身時候到了”，現在這些希望都落空了。
<P> 從開羅到安曼，普通民眾在談到伊拉克的時候，無不擔心這個國家裡哪些飽經苦難的百姓能否再次經受得住美國各類新式武器的狂轟濫炸，雖然他們對反覆無常的海珊政權已經不再“感興趣”，但對美國趾高氣揚行徑的憎惡程度卻沒有絲毫降低。不過，目前依然有許多巴勒斯坦人非常支援海珊，因為只有這位領導人堅持不斷出來譴責以色列，儘管這種口頭抨擊似乎沒有任何作用，但至少能給他們少許安慰。阿拉伯人表示，美國發動對伊拉克戰爭根本不是為了什麼推進民主，而是看中了當地豐富的石油資源，並以此在確定自己在中東地區的霸主地位
</DIV>
<P>
<TABLE ID="oData">
<TR>
<TD CLASS="datahead">CSS Property</TD>
<TD CLASS="datahead">style</TD>
<TD CLASS="datahead">runtimeStyle</TD>
<TD CLASS="datahead">currentStyle</TD>
<TD CLASS="datahead"><b>Select a Value</b></TD>
</TR>
<TR>
<TD CLASS="dataitem">backgroundColor</TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"><SELECT CLASS="dataitem" onchange="fnChangeStyle('backgroundColor',this.options(this.selectedIndex).text)">
<OPTION>Indigo
<OPTION>MistyRose
<OPTION>MediumOrchid
<OPTION>Pink
<OPTION>Yellow
<OPTION>CLEAR THIS RUNTIME STYLE
</SELECT>
</td>
</TR>
<TR>
<TD CLASS="dataitem">borderColor</TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"><SELECT CLASS="dataitem" onchange="fnChangeStyle('borderColor',this.options(this.selectedIndex).text)">
<OPTION>Red
<OPTION>Green
<OPTION>Blue
<OPTION>Yellow
<OPTION>CLEAR THIS RUNTIME STYLE
</SELECT>
</td>
</TR>
<TR>
<TD CLASS="dataitem">color</TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"></TD>
<TD CLASS="dataitem"><SELECT CLASS="dataitem" onchange="fnChangeStyle('color',this.options(this.selectedIndex).text)">
<OPTION>Red
<OPTION>White
<OPTION>Blue
<OPTION>Yellow
<OPTION>Silver
<OPTION>Gold
<OPTION>CLEAR THIS RUNTIME STYLE
</SELECT>
</td>
</TR>
</TABLE>
</body>
</html>
