要實現動態網頁，方案有很多，其中通過CSS來動態改變介面樣式是網頁設計者最喜歡使用的技術。
在使用CSS樣式動態改變介面樣式中，大家通常是定義多個CLASS樣式對象，然後在JAVASCRIPT（或VBSCRIPT）指令碼中設定對象的class屬性為某一個指定的樣式Class名或直接修改對象的STYLE屬性實現。這些方法在修改少量有限的樣式時是非常有效，但如果要對整個頁面的元素對象的樣式進行變動時，便會感到非常的麻煩了。
這裡提供一個通過動態載入CSS樣式檔案來實現介面樣式動態修改的方法：
方法：
把介面的多個樣式儲存到不同的樣式檔案中，然後通過CLIENT的操作（比如按按鈕）動態載入新的樣式檔案，實現介面元素樣式的批量修改。
原理：
每個STYLE樣式對象都有一個stylesheet屬性，指向該STYLE對象的樣式對象。
stylesheet對象具有cssText屬性，值為樣式文本的具體設定內容，可讀寫，我們可以把這個屬性的值設定為一個空的字串刪除樣式。
stylesheet對象具有addImport方法，用於載入URL檔案，其調用格式為：stylesheet.addImport(sURL[,iIndex])，sURL為要載入的CSS檔案URL，iIndex為集合中樣式單被請求的位置，預設為樣式單被添加至集合的末尾。
樣本：
本樣本通過點擊按鈕動態切換頁面背景顏色。
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 type="button">切換背景顏色</button>
</body>
</html>
StyleSheet1.CSS樣式代碼：
BODY
{
background-color: Black;
}
StyleSheet2.CSS樣式代碼：
BODY
{
background-color: maroon;
}
posted on 2004
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
