使用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并不起作用

回答

相关问题