|
//問題：只能改變本頁面樣式，不是全局方案
要實現(xiàn)動態(tài)網(wǎng)頁，方案有很多，其中通過CSS來動態(tài)改變界面樣式是網(wǎng)頁設(shè)計者最喜歡使用的技術(shù)。
在使用CSS樣式動態(tài)改變界面樣式中，大家通常是定義多個CLASS樣式對象，然后在JAVASCRIPT（或VBSCRIPT）腳本中設(shè)置對象的class屬性為某一個指定的樣式Class名或直接修改對象的STYLE屬性實現(xiàn)。這些方法在修改少量有限的樣式時是非常有效的，但如果要對整個頁面的元素對象的樣式進(jìn)行變動時，便會感到非常的麻煩了。
這里提供一個通過動態(tài)加載CSS樣式文件來實現(xiàn)界面樣式動態(tài)修改的方法：
方法：
把界面的多個樣式存儲到不同的樣式文件中，然后通過CLIENT的操作（比如按按鈕）動態(tài)的加載新的樣式文件，實現(xiàn)界面元素樣式的批量修改。
原理：
每個STYLE樣式對象都有一個stylesheet屬性，指向該STYLE對象的樣式對象。
stylesheet對象具有cssText屬性，值為樣式文本的具體設(shè)置內(nèi)容，可讀寫，我們可以把這個屬性的值設(shè)置為一個空的字符串刪除樣式。
stylesheet對象具有addImport方法，用于加載URL文件，其調(diào)用格式為：stylesheet.addImport(sURL[,iIndex])，sURL為要加載的CSS文件URL，iIndex為集合中樣式單被請求的位置，缺省為樣式單被添加至集合的末尾。
示例：
本示例通過點擊按鈕動態(tài)的切換頁面背景顏色。
HTML代碼：
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<link href="stylesheet1.css" type="text/css" rel="stylesheet" id="mycss">
<script language="javascript">
var turnback=false;
function setCSS()
{
mycss.styleSheet.cssText="";
mycss.styleSheet.addImport(turnback?"stylesheet1.css":"stylesheet2.css");
turnback=!turnback;
}
</script>
</head>
<body>
<button onclick="setCSS()" type="button">切換背景顏色</button>
</body>
</html>
StyleSheet1.CSS樣式代碼：
BODY
{
background-color: Black;
}
StyleSheet2.CSS樣式代碼：
BODY
{
background-color: maroon;
}
|
