如何：動態切換CSS頁面

我的工作在網頁上的嵌入式設備，其中服務器的存儲空間是非常有限的。我希望用戶能夠在日間模式和夜間模式下查看網頁。要做到這一點，我想只是點擊一個按鈕，使用不同的網頁加載頁面。由於我沒有足夠的空間，我不想每個頁面都有兩個副本。有沒有辦法切換到不同的CSS頁面或以某種方式動態加載CSS？我只能使用html和javascript。沒有PHP或asp.net。如何：動態切換CSS頁面

JS：

來源

2011-05-26 PICyourBrain

讓我爭論的東西更簡單：

1：一個CSS：

.day { 
    color: black; 
    background-color: white; 
} 

.night { 
    color: white; 
    background-color: black; 
} 

.day #content { 
    color: blue; 
} 

.night #content{ 
    color: red; 
}

2：一張HTML：

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="dayornight.css"> 
    </head> 
    <body class="day"> 
    <div id="content"> 
     <a>Hello World!</a> 
    </div> 
    </body> 
</html>

3：將一小片的JavaScript，或者jQuery代碼綁到切換對身體標記的類從白天到夜晚的按鈕。

正如你可以看到，如果你在瀏覽器中把這個例子起來，改變類不僅改變了身體的CSS樣式，也可以轉移所包含的項目以及因爲他們的選擇，現在搭配不同。

來源

2011-05-26 16:49:28

謝謝你的提示。我沒有想到，但看起來很簡單。我會試一下！ – PICyourBrain 2011-05-26 16:59:38

在這裏，你在普通的JavaScript去

function change_css(){ 
    var oLink = document.createElement("link") 
    oLink.href = "new_css.css"; //new css filename 
    oLink.rel = "stylesheet"; 
    oLink.type = "text/css"; 
    document.body.appendChild(oLink); 
}

HTML：

<button onclick="change_css()" value="css change"/>

來源

2011-05-26 16:30:44 Neal

這只是增加了一個樣式表，對不對？它沒有擺脫舊的？你會擔心重寫規則，特異性，能拼「專一」 ...... – sdleihssirhc 2011-05-26 16:46:32

@sdleihssirhc CSS規則級聯，所以新規則會覆蓋舊的 – Neal 2011-05-26 16:47:20

如何：動態切換CSS頁面

回答

相關問題