樣式與資料分離所帶來的不只是符合標準這樣的簡單，樣式既然與資料分離那麼樣式的切換則變得理所當然的了！但是網上這樣的中文教程實在是太少了！所以我收集了一部分中外**已經實現的技術資料整理出來供網友參考。
首先要具備不同內容的
css檔案（最好每個檔案代表一種樣式，或是代表需要作出變動的部分）。這裡以三個為例：
第乙個是背景為紅色的
css檔案（
red.css
）css
中的內容為：
body
第二個是背景為綠色的
css檔案（
green.css
）css
中的內容為：
body
第三個是背景為黃色的
css檔案（
yellow.css
）css
中的內容為：
body
然後在xthml
檔案中加入這三個
css的鏈結
css" type="text/css
" title="red" media="screen, projection"/>
css" type="text/css
" title="green" media="screen, projection"/>
css" type="text/css
" title="yellow" media="screen, projection"/>
這三個中除了
title
不一樣外還有乙個地方有所不同，那就是
rel。第乙個與第三個都是
alternate stylesheet
只有第二個是
stylesheet
。這第二個就是當然樣式。
在鏈結下面再匯入乙個
js檔案，用來控制這個樣式切換
引用內容
function setactivestylesheet(title) }}
}function getactivestylesheet()
return null;
}
在合適的地方加入三個切換按鈕
紅色樣式
">
綠色樣式
">
黃色樣式
">
沒有樣式
">
好了發布試試點那三個切換鏈結！是不是已經切換了樣式？
補遺：帶有記憶功能的
js文件
引用內容
function setactivestylesheet(title) }}
function getactivestylesheet()
return null;
}function getpreferredstylesheet()
return null;
}function createcookie(name,value,days)
else expires = "";
document.cookie = name+"="+value+expires+";
path=/";
}function readcookie(name)
return null;
}window.onload = function(e)
window.onunload = function(e)
var cookie = readcookie("style");
var title = cookie ? cookie :
getpreferredstylesheet();
setactivestylesheet(title);
CSS樣式切換技巧 動態更換網頁色彩面板
樣式與資料分離所帶來的不只是符合標準這樣的簡單，樣式既然與資料分離那麼樣式的切換則變得理所當然的了！但是網上這樣的中文教程實在是太少了！所以我收集了一部分中外 已經實現的技術資料整理出來供參考。首先要具備不同內容的css檔案 最好每個檔案代表一種樣式，或是代表需要作出變動的部分 這裡以三個為例 第乙...
CSS樣式設定技巧
一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align...
CSS樣式設定技巧
一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素，塊狀元素裡面又分為定寬塊狀元素，以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時，水平居中是通過給父元素設定text align...