CSS樣式切換技巧 動態更換網頁色彩面板

2021-08-27 17:45:09 字數 1463 閱讀 4175

樣式與資料分離所帶來的不只是符合標準這樣的簡單,樣式既然與資料分離那麼樣式的切換則變得理所當然的了!但是網上這樣的中文教程實在是太少了!所以我收集了一部分中外**已經實現的技術資料整理出來供網友參考。

首先要具備不同內容的css檔案(最好每個檔案代表一種樣式,或是代表需要作出變動的部分)。這裡以三個為例:

第乙個是背景為紅色的css檔案(red.css)css中的內容為:

copy code

body

第二個是背景為綠色的css檔案(green.css)css中的內容為:

copy code

body

第三個是背景為黃色的css檔案(yellow.css)css中的內容為:

copy code

body

然後在xthml檔案中加入這三個css的鏈結

copy code

這三個中除了title不一樣外還有乙個地方有所不同,那就是rel。第乙個與第三個都是alternate stylesheet只有第二個是stylesheet。這第二個就是當然樣式。

在鏈結下面再匯入乙個js檔案,用來控制這個樣式切換

copy code

function setactivestylesheet(title)

} }

} function getactivestylesheet()

return null;

}在合適的地方加入三個切換按鈕

copy code

好了發布試試點那三個切換鏈結!是不是已經切換了樣式?

補遺:帶有記憶功能的js文件

copy code

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樣式九條技巧

第一.css字型的簡寫 平時當你使用css定義字型時你可能會這樣做 font size 1em line height 1.5em font weight bold font style italic font variant small caps font family verdana,serif...

CSS樣式設定技巧

一 水平居中設定 在實際工作中常會遇到需要設定水平居中的場景,比如為了美觀,文章的標題一般都是水平居中顯示的。我們將其分為兩種情況 行內元素和塊狀元素,塊狀元素裡面又分為定寬塊狀元素,以及不定寬塊狀元素。1.行內元素 如果被設定元素為文字 等行內元素時,水平居中是通過給父元素設定text align...