如何在點擊時更改整個頁面/網站的CSS？

是否有可能在一個頁面上有3-4個CSS，然後在任何事件中，比如點擊，更改整個網頁的CSS。這樣我們可以給我們的用戶改變主題的能力。我知道我們可以通過改變元素的CSS：如何在點擊時更改整個頁面/網站的CSS？

$("#myElementID").removeClass("class1").addClass("class2");

來源

2010-03-14 Rakesh Juyal

是的，這是可能的。通常情況下，您要做的是編寫一個JavaScript函數，該函數將更改文檔的<head>或從文檔的<head>中添加或刪除樣式表。爲了讓體驗更好一點，您通常會將用戶的偏好存儲在cookie中。有一個article on A List Apart that show how to implement this。當然，you can do this with jQuery ...你可能想看看jStyler的來源。

來源

2010-03-14 16:58:10

這似乎是有前途的:) +1 – 2010-03-14 17:01:55

見jStyler plguin的jQuery ，這個源文件非常簡短並且易於理解。 – 2010-03-14 17:04:09

The CSS Zen Garden（見第五個問題）最終決定是最簡單的方法是剛剛刷新頁面，並設置一個新的CSS服務器端。

來源

2010-03-14 16:55:05 Turtle

但我想這樣做@client邊，我的意思是使用jQuery或JavaScript – 2010-03-14 17:02:42

CSS是emdeded到DOM在「鏈接」的標籤，這樣你就可以找到這個鏈接，並添加/刪除

下面的代碼演示如何刪除和添加新的（我使用MS AJAX參見方法$得到，但你可以用純DOM或其他方言）替換它：

var head = document.getElementsByTagName('head')[0]; 

    var oldLink = $get("nameOfLink", head); 
    if(oldLink!=null) 
     head.removeChild(oldLink); //remove old entry 
    var s = document.createElement('link'); 
    s.id="nameOfLink"; 
    s.type = 'text/css'; 
    s.rel="stylesheet"; 
    s.charset ='utf-8'; 
    s.href = "http://your-provided-url"; 
    head.appendChild(s);

來源

2010-03-14 16:58:31 Dewfy

不會刪除並添加'link rel =「樣式表」'會做到這一點嗎？不確定，但我將不得不試試 – 2010-03-14 17:06:14

@Rakesh Juyal你是指類型/ ID /字符集的冗餘？如果是這樣的話，charset真的是多餘的，但一些瀏覽器強烈推薦類型（可能是我錯了，但IE需要它）。腳本邏輯需要'id'。 – Dewfy 2010-03-14 18:16:16

平時最好加載外部的樣式表（追加<鏈接>）：http://snipplr.com/view/3873/failsafe-load-for-attaching-stylesheet/

但是，如果你需要創建一堆在飛行中的風格，你還可以建立和>節點追加<風格的DOM：http://jonraasch.com/blog/javascript-style-node

來源

2010-03-14 20:06:51

如何在點擊時更改整個頁面/網站的CSS？

回答

相關問題