下载了几个zen的案例文件,写个简单JS方便欣赏禅意花园的精致效果,自己备注下,大牛别进:
<link rel="stylesheet" href="001/001.css" id="CSS01" />
<label for="select">Select CSS: </label>
<select name="select" id="selectCSS">
<option value="001">001</option>
<option value="201">201</option>
<option value="202">202</option>
<option value="203">203</option>
<option value="204">204</option>
<option value="205">205</option>
<option value="206">206</option>
<option value="207">207</option>
<option value="208">208</option>
<option value="209">209</option>
<option value="210">210</option>
<option value="211">211</option>
<option value="212">212</option>
<option value="213">213</option>
</select>
<button name="CCss" onClick="javaScript:makeCss();">ChangeCss</button>
<script type="text/javascript">
function makeCss(){
var selectCss=document.getElementById("selectCSS");
var linkCss=document.getElementById("CSS01");
var cssUrl=selectCss.value+"/"+selectCss.value+".css";
linkCss.setAttribute("href",cssUrl);
}
</script>
随机更改外联样式表文件代码:
<script language="javascript">
function kkk(){
var css=document.getElementById("css01");
var kk=Math.random();
if (kk>0.7) {
css.setAttribute("href","css/css_Change1.css");
} else if (kk>0.4){
css.setAttribute("href","css/css_Change2.css");
} else {
css.setAttribute("href","css/css_Change3.css");
}
}
</script>
<link href="css/css_Change2.css" rel="stylesheet" type="text/css" id="css01" />
<link rel="stylesheet" href="001/001.css" id="CSS01" />
<label for="select">Select CSS: </label>
<select name="select" id="selectCSS">
<option value="001">001</option>
<option value="201">201</option>
<option value="202">202</option>
<option value="203">203</option>
<option value="204">204</option>
<option value="205">205</option>
<option value="206">206</option>
<option value="207">207</option>
<option value="208">208</option>
<option value="209">209</option>
<option value="210">210</option>
<option value="211">211</option>
<option value="212">212</option>
<option value="213">213</option>
</select>
<button name="CCss" onClick="javaScript:makeCss();">ChangeCss</button>
<script type="text/javascript">
function makeCss(){
var selectCss=document.getElementById("selectCSS");
var linkCss=document.getElementById("CSS01");
var cssUrl=selectCss.value+"/"+selectCss.value+".css";
linkCss.setAttribute("href",cssUrl);
}
</script>
随机更改外联样式表文件代码:
<script language="javascript">
function kkk(){
var css=document.getElementById("css01");
var kk=Math.random();
if (kk>0.7) {
css.setAttribute("href","css/css_Change1.css");
} else if (kk>0.4){
css.setAttribute("href","css/css_Change2.css");
} else {
css.setAttribute("href","css/css_Change3.css");
}
}
</script>
<link href="css/css_Change2.css" rel="stylesheet" type="text/css" id="css01" />