[查看演示] 源码如下
----------------------------------------------------------
<HTML>
<HEAD>
<TITLE>runtimeStyle Object－www.51windows.Net</TITLE>
<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();
}
</SCRIPT>
</HEAD>
<BODY onload="fnInit()" TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<H1>runtimeStyle Object Sample</H1>
<DIV ID="oScratch" STYLE="border: '5 solid'; border-color: #101010; background-color: #CFCFCF; color: #000000; font-size: 12pt; font-family: 'Arial';">
This sample demonstrates the use of the <b>runtimeStyle</b> object.
The <b>runtimeStyle</b> object allows authors to use a particular style to override an existing style specified inline or in a style sheet.
<P>In this sample, you can select different values to be set on the <b>runtimeStyle</b> object for the preconfigured properties used for this paragraph.
When you select a new value, notice that the values for the <b>runtimeStyle</b> and <b>currentStyle</b> objects change for that property, but the <b>style</b> object does not.
When the value is cleared (select 'CLEAR' from the drop-down menu) from the <b>runtimeStyle</b> object, the property value reverts to the <b>style</b> value, and the <b>currentStyle</b> value reflects this.
</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>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代码" onClick= 'window.location = "view-source:" + window.location.href'></div> |
