使用jQuery更改樣式表href並不起作用

我正在創建一個用戶將在該字段中訪問的Web應用程序，因此他們希望能夠根據環境手動將樣式從淺到深切換爲黑暗燈光。我正在使用jQuery。使用jQuery更改樣式表href並不起作用

我在樣式表中添加了id屬性，然後使用toggle()事件創建了一個按鈕，其中我將href屬性更改爲我想要的CSS文件。 CSS文件有幾個@import指令，因爲我將樣式分成幾個文件以實現可維護性。

我的問題是隻有主要的CSS文件正在被應用。我嘗試使用@import指令中的絕對路徑，但沒有運氣。

有沒有修復這裏我錯過了，還是我必須包含在一個CSS文件中的所有內容？

編輯：

Apprently這只是在IE8的一個問題，在Chrome和Firefox正常工作。不幸的是，我的客戶只希望只有 IE8。看起來這是一個重複的this question.

來源

2010-06-09 Michael Itzoe

您是否嘗試瞭解它是否可以在沒有@import指令的情況下使用，而是使用css規則呢？ – 2010-06-09 16:21:42

同意Gaby - MSIE中的@import實現有點麻煩（需要特定的配置並且必須是第一項）...其他瀏覽器更加寬容... – 2010-06-09 16:24:27

爲什麼你要用javascript而不是服務器端腳本？當然，您可以根據一天中的時間或用戶設置輕鬆地提供正確的主題？什麼是內置的應用程序？ – 2010-06-09 21:53:18

我確實在this question找到了答案，但我必須做更多的工作才能使它適用於我。肘是ID爲ToggleStyle上IMG標籤進行，所以我的jQuery代碼弄成這樣：

$("#ToggleStyle").toggle(
    function() { 
     $("link").last().remove(); 
     document.createStyleSheet("styles/light/master.css"); 
     $(this).attr("src", "images/light/style.png"); 
    }, 
    function() { 
     $("link").last().remove(); 
     document.createStyleSheet("styles/dark/master.css"); 
     $(this).attr("src", "images/dark/style.png"); 
    } 
);

針對@dukebag，是的，我的意思是光碰到顯示器，因爲這個應用程序將使用24/7，他們想要一個低對比度的主題夜間。儘管我喜歡橫向版，但樣式表已經完整，並且像大多數項目一樣，時間決定了最快捷，最便宜的解決方案。

來源

2010-06-09 18:12:50

我沒有一個確定的答案，但我懷疑@imports沒有被「運行」，當你改變的href的URL。

我會採取一種不同的方法 - 用類標記身體，並在事件觸發時更改類。

<body class="LightTheme">

然後

document.getElementsByTagName("body")[0].className = "DarkTheme";

這不，不幸的是，意味着對於這兩個主題的所有樣式必須是可用在CSS中，而不是加載一個或另一組的CSS文件。還有其他策略可能，包括當樣式改變時強制頁面重新加載，服務器將一個或另一個主題名稱寫爲主體的類，例如， <body class="${chosenTheme}">

來源

2010-06-09 16:30:24

根據我的經驗，IE8在最初解析DOM並應用樣式後不喜歡識別某些更改。例如，我記得在初始設置爲「display：none」的元素遇到問題，然後試圖通過jQuery來修改它們。

但是，我的答案與Stephen的相同。

你提到了環境光 - 我假設你在談論光線照射到顯示器。如果意圖的程式化程度低於可用性程度，則可能需要嘗試程序遍歷，將背景色&顏色標記轉換爲HSB，更改亮度，然後返回到RBG /十六進制。取決於頁面的大小，取決於您的要求，取決於意圖。您可以將一個類附加到可能會接受此類更改的所有元素。關於圖像，您可以預先加載2個圖像重疊，然後通過切換不透明度來調整亮度（例如，在輕拷貝/深色拷貝之間的滑塊）。

來源

2010-06-09 16:37:32 dukebag

簡單的答案，你只需要在你的樣式表中做一些額外的指示。

就像一個旁註，基於我對需求的理解，我會做主題設置服務器端，這是我的理解，主題將至少每天活動幾個小時。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test Page</title> 
    <script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
    * { font-family: "Lucida Grande" , "Lucida Sans Unicode" , Verdana, sans-serif; } 
    body { font-size: 0.7em; margin: 0; }  
    div#themeContainer, div#themeContainer div, div#header, div#footer, div#content 
    { margin: 0; padding: 0; }  
    div#content 
    { text-align: center; } 
    div#header 
    { height: 103px; background: #88f; } 
    div#footer 
    { height: 60px; background: #f88; } 
    div#content div.centered 
    { margin: 0 auto; width: 900px; text-align: left; height: 200px; background: #ddd; } 
    div#content div.centered h1 
    { margin-top: 0px; }  
    div.dark 
    { background: #ccc; }  
    div.dark div#header 
    { background: #777; } 
    div.dark div#footer 
    { background: #777; }  
    div.dark div#content div.centered 
    { background: #234; color: #ddd; } 
    div.dark h1 
    { color: #efe; } 
    div.dark a 
    { color: #fff; font-weight: bold; } 
    </style> 
</head> 
<body> 
    <div id="themeContainer"> 
    <div id="header"> 
     <p> 
     Header gumpf</p> 
    </div> 
    <div id="content"> 
     <div class="centered"> 
     <div> 
      <h1> 
      Header</h1> 
      <p> 
      Some text</p> 
      <a id="changeTheme" href="#">Click here to change theme</a> 
     </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <p> 
     Footer gumpf</p> 
    </div> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#changeTheme").click(function() { 
     var container = $("#themeContainer"); 
     if (container.hasClass("dark")) 
      container.removeClass("dark") 
     else 
      container.addClass("dark"); 
     return false; 
     }); 
    }); 
    </script> 
</body> 
</html>

來源

2010-06-09 21:41:05

使用jQuery更改樣式表href並不起作用

回答

相關問題