JavaScript 應用：變換風格

何謂變換風格？

按一下連結，看看何謂變換風格。

步驟 1：搜尋

試以關鍵詞「javascript+css+change style」尋找有關程式。以下是其中最適用、最易用、最好用的一個：

Codelifter.com
http://www.codelifter.com/main/javascript/changestyles.html

步驟 2：織網

編寫新網頁，網頁中應已連結了定義好的 css 風格樣式檔 ( .css files)。如：

<head>

......

......

</head>

以上各 css 風格樣式檔的檔名可隨意設定。

步驟 3：程式

1. 把下列語句加在網頁原始檔中的 head 之內。

<head>

......

......

</head>

步驟 4：啟動

把下列語句的起動部份加到網頁原始檔的 body 之內，至於放在 body 之中的哪兒，則由網頁計設者自行從頁面設計上考慮。

<body>

......

<a href="JavaScript:changeSheets(1)">Style One</a>
<a href="JavaScript:changeSheets(2)">Style Two</a>
<a href="JavaScript:changeSheets(3)">Style Three</a>
<a href="JavaScript:changeSheets(4)">Style Four</a>

......

</body>

啟動部份以連結形式表現。

步驟 5：調校

這是最重要的部份：調校有關參數。

待譯......

Use this script to allow visitors to change a page style sheet on-the-fly, by clicking on a link in the page. The script works by switching the active style sheets. You can use any number of style sheets, which are automatically detected by the script.

Make up your style sheets and set the link rel='s up to load them, as shown below. These belong in the <head> of the page.

What you name the style sheet files does not matter (so long as the extension is .css) since the script references them only by a number, not the file name.

We show four different style sheets used; but you can use fewer or more as needed. The script will automatically detect the number of style sheets in use.

Note the order of the style sheets. The *last* sheet loaded is the one the browser will use initially. One trick to avoid confusion is shown below, where we load the first sheet an additional time at the
end of the list.

A simple JavaScript call to the changeSheets() function enables the desired style sheet. We've adjusted the call so you start at 1 for the first sheet, 2 for the second sheet, 3 for the third, etc., in the same order they are listed in your link rel='s above.

步驟 6：試用

試用後把編寫好的網頁上載到伺服器上。