JavaScript 經典代碼（3）

<link rel="stylesheet" href="/style.css" type="text/css">
<style type="text/css">
body {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt; SCROLLBAR-HIGHLIGHT-COLOR: buttonface; SCROLLBAR-SHADOW-COLOR: buttonface; SCROLLBAR-3DLIGHT-COLOR: buttonhighlight; SCROLLBAR-TRACK-COLOR: #eeeeee; SCROLLBAR-DARKSHADOW-COLOR: buttonshadow
}

A:visited {
 color: #000000; text-decoration: none; line-height: 18px
}
A:active {
 color: #000000; text-decoration: none; line-height: 18px
}
A:hover {
 color: #FF0000; text-decoration: none; line-height: 18px
}
A:link {
 color: #000000; text-decoration: none; line-height: 18px
}
TD {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
DIV {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
FORM {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
OPTION {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
P {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
TD {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
BR {
 FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
INPUT {
 BORDER-BOTTOM-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #cccccc; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #cccccc; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #cccccc; BORDER-TOP-WIDTH: 1px; FONT-SIZE: 9pt; HEIGHT: 18px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px
}
TEXTAREA {
 BACKGROUND-COLOR: #efefef; BORDER-BOTTOM-COLOR: #000000; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #000000; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #000000; BORDER-TOP-WIDTH: 1px; FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
SELECT {
 BACKGROUND-COLOR: #efefef; BORDER-BOTTOM-COLOR: #000000; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-COLOR: #000000; BORDER-LEFT-WIDTH: 1px; BORDER-RIGHT-COLOR: #000000; BORDER-RIGHT-WIDTH: 1px; BORDER-TOP-COLOR: #000000; BORDER-TOP-WIDTH: 1px; FONT-FAMILY: 宋體; FONT-SIZE: 9pt
}
</style>

<style type="text/css">
A.new:link {
 FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: 宋體; TEXT-DECORATION: none
}
A.new:visited {
 FONT-SIZE: 9pt; COLOR: #ffffff; FONT-FAMILY: 宋體; TEXT-DECORATION: none
}
A.new:active {
 FONT-SIZE: 10pt; COLOR: #ffff99; FONT-FAMILY: 宋體; TEXT-DECORATION: underline
}
A.new:hover {
 FONT-SIZE: 10pt; COLOR: #ffff99; FONT-FAMILY: 宋體; TEXT-DECORATION: underline
}
.SCROLLBAR {
 SCROLLBAR-FACE-COLOR: #718698;
 SCROLLBAR-HIGHLIGHT-COLOR: #899aa9;
 SCROLLBAR-SHADOW-COLOR: #506981;
 SCROLLBAR-3DLIGHT-COLOR: #5b7086;
 SCROLLBAR-ARROW-COLOR: #506981;
 SCROLLBAR-TRACK-COLOR: #5b7086;
 SCROLLBAR-DARKSHADOW-COLOR: #5b7086
}
.test1 {
 LINE-HEIGHT: 1.4; TEXT-DECORATION: underline overline
}
#test2 {
 LINE-HEIGHT: 2; BACKGROUND-COLOR: blue
}
</style>

<script language="javascript">
/*
 The following code are designed and writen by Windy_sk <windy_sk@126.com>
 You can use it freely, but u must held all the copyright items!
*/

var ArrCss = new Array();

function GetStyleSheet(){
 var ArrCss = new Array();
 var i, j, temp, tmp, CurStyle = null;
 for(i=0;i<document.styleSheets.length;i++){
  ArrCss[i] = new Array();
  for(j=0;j<document.styleSheets[i].rules.length;j++){
   CurStyle = document.styleSheets[i].rules[j];
   var temp = new Array();
   for(tmp in CurStyle.style){
    if(CurStyle.style.cssText.replace(/-/g,"").toLowerCase().search(tmp.toLowerCase()+":")!=-1 && CurStyle.style[tmp]!=""){
     temp[tmp] = CurStyle.style[tmp];
    }
   }
   ArrCss[i][CurStyle.selectorText] = temp;
  }
 }
 return(ArrCss);
}

function Build_Selection(sel_lv){
 var the_arr = new Array();
 var the_sel = null;
 var tmp, i;
 switch(sel_lv){
  case 1:
   for(tmp in ArrCss[document.getElementById("CssSel").value]){
    the_arr[the_arr.length] = tmp;
   }
   the_sel = document.getElementById("ItmSel");
   Show_Css();
   break;
  case 2:
   for(tmp in ArrCss[document.getElementById("CssSel").value][document.getElementById("ItmSel").value]){
    the_arr[the_arr.length] = tmp;
   }
   the_sel = document.getElementById("AttSel");
   break;
  case 3:
   the_sel = document.getElementById("CssVal");
   the_sel.value = ArrCss[document.getElementById("CssSel").value][document.getElementById("ItmSel").value][document.getElementById("AttSel").value]
   return;
 }

 the_sel.innerHTML = "";
 for(i=0; i<the_arr.length; i++){
  the_sel.options[the_sel.options.length] = new Option(the_arr[i],the_arr[i]);
 }
 the_sel.selectIndex = 0;
 
 if(sel_lv < 3)
  Build_Selection(sel_lv+1);
 else
  return;
}

function Show_Css(){
 var Content = document.styleSheets[document.getElementById("CssSel").value].cssText;
 Content  = Content.replace(/\{[\W]*(.+)[\W]*\}/g,"{$1}");
 Content  = Content.replace(/[\r\n]?\}/g,"}");
 Content  = Content.replace(/[;]?\}/g,";}");
 Content  = Content.replace(/(\s+)?([:;\{]{1})(\s+)?/g,"$2");
 Content  = Content.replace(/([\w\-]+):([^:;]*)(;|\r)/g,"&nbsp; &nbsp; &nbsp; &nbsp; $1 : <font color=blue>$2</font> ; <br />");
 Content  = Content.replace(/(.+\{)([^\{\}]+)(\})/g,"<font color=red>$1</font><br />$2<font color=red>$3</font><br /><br />");
 Content  = Content.replace(/[\r\n]/g,"");
 Content  = Content.replace(/<br \/>/g,"<br />\n");
 Content  = Content.replace(/([:\{]{1})/g," $1 ");
 show.document.open();
 show.document.writeln("<style>*{font-size: 9pt}</style>");
 show.document.write(Content);
 show.document.close();
 return;
}

function Imp_Css(url){
 var new_SS = null;
 if(url==""){
  new_SS  = document.createElement("Style");
  new_SS.type = "text/css"
  document.body.insertBefore(new_SS);
  InitCss();
 }else{
  new_SS  = document.createElement("link");
  new_SS.rel = "stylesheet";
  new_SS.type = "text/css"
  new_SS.href = url;
  document.body.insertBefore(new_SS);
  setTimeout("InitCss()",1000);
 }
 return;
}

function Crea_Css(Label,CssText){
 var Cidx = document.getElementById("CssSel").selectedIndex;
 document.styleSheets[Cidx].addRule(Label, CssText,0);
 InitCss();
 return;
}

function Dele_Css(){
 var Cidx = document.getElementById("CssSel").selectedIndex;
 var Ridx = document.getElementById("ItmSel").selectedIndex;
 document.styleSheets[Cidx].removeRule(Ridx);
 InitCss();
 return;
}

function Modi_Css(){
 var Cidx = document.getElementById("CssSel").selectedIndex;
 var Ridx = document.getElementById("ItmSel").selectedIndex;
 var Selector = document.getElementById("AttSel").value;
 var New_Val  = document.getElementById("CssVal").value;
 document.styleSheets[Cidx].rules[Ridx].style[Selector] = New_Val;
 InitCss();
 return;
}

function InitCss(){
 ArrCss = GetStyleSheet();
 var CssSel = document.getElementById("CssSel");
 CssSel.innerHTML = "";
 for(i=0; i<ArrCss.length; i++){
  CssSel.options[CssSel.options.length] = new Option("Style Sheet " + (i+1),i);
 }
 CssSel.selectedIndex = 0;
 Build_Selection(1);
 return;
}

window.onload = new Function("setTimeout('InitCss()',1000)");

</script>

<span>
 <select id="CssSel" onChange="Build_Selection(1)" style="width: 150px"></select>
 <select id="ItmSel" onChange="Build_Selection(2)" style="width: 150px"></select>
 <select id="AttSel" onChange="Build_Selection(3)" style="width: 150px"></select>
 <input  id="CssVal" type="text" />
 <input type="button" value="Change" onClick="Modi_Css()" />
 <input type="button" value="Delete" onClick="Dele_Css()" />
</span>
<br />
<span>
 Selector: <input type="text" id="Clbl"> &nbsp;
 CssText : <input type="text" id="Ctxt">
 <input type="button" value="Create" onClick="Crea_Css(Clbl.value,Ctxt.value)" />
</span>
<br />
<span>
 NewCss(url or empty): <input type="text" id="Impo_Css" size="43">
 <input type="button" value="Import" onClick="Imp_Css(Impo_Css.value)" />
</span>
<br />
<br />
<center style="width:600px">
<fieldset style="text-align:left;height:120px;overflow-y:SCROLL" class="SCROLLBAR">
  <a href="#">A</a> &nbsp; <a href="#" class="normal">A.normal</a> &nbsp; <br>
  <input type="button" value="button"> &nbsp; <input type="checkbox"> &nbsp; <input type="text"> &nbsp; <select><option>select</option></select> &nbsp; <br>
  <p> Tag P text </p>
  <font id=test2>id = text2</font>
</fieldset>
</center>

<br>

<iframe id="show" frameborder=0 scrolling="auto" src="about:blank" width="100%" height="90%" vspale="0"></iframe>