用 jQuery 更改样式表 href 不太奏效答案

【问题标题】：Changing stylesheet href with jQuery doesn't quite work用 jQuery 更改样式表 href 不太奏效
【发布时间】：2010-06-09 16:10:15
【问题描述】：

我正在创建一个用户将在现场访问的网络应用程序，因此他们希望能够根据环境照明手动将样式从浅色切换到深色。我正在使用 jQuery。

我在样式表中添加了一个id 属性，然后使用toggle() 事件创建了一个按钮，其中我将href 属性更改为我想要的CSS 文件。 CSS 文件有几个 @import 指令，因为我将样式拆分为几个文件以进行维护。

我的问题是只应用了主 CSS 文件。我尝试在@import 指令中使用绝对路径，但没有成功。

这里有我遗漏的修复，还是我必须将所有内容包含在一个 CSS 文件中？

编辑：

显然这只是 IE8 中的问题，在 Chrome 和 Firefox 中运行良好。不幸的是，我的客户只需要 IE8。看起来这是this question.的副本

【问题讨论】：

你有没有试过看看它是否在没有@import指令但使用css规则的情况下工作？
同意 Gaby - MSIE 中的 @import 实现有点做作（需要特定配置，必须是第一项）...其他浏览器更宽容...
你为什么用javascript而不是服务器端脚本来做这个？当然，您可以根据一天中的时间或用户设置轻松提供正确的主题？内置的应用是什么？

标签： jquery css stylesheet

【解决方案1】：

我没有明确的答案，但我怀疑 @imports 在您更改 href 的 URL 时没有被“运行”。

我会采取不同的方法——用一个类标记正文并在你的toggle() 事件触发时更改类。

<body class="LightTheme">

然后

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

不幸的是，这确实意味着这两个主题的所有样式都必须在 CSS 中可用，而不是加载一个或另一组 CSS 文件。还有其他可能的策略，包括在样式更改时强制页面重新加载，服务器将一个或另一个主题名称写入正文的类，例如<body class="${chosenTheme}">

【讨论】：

【解决方案2】：

根据我的经验，IE8 在最初解析 DOM 并应用样式后不喜欢识别某些更改。例如，我记得最初设置为“显示：无”的元素有问题，然后尝试通过 jQuery 更改它们。

不过，我的回答与斯蒂芬的相同。

您提到了环境光 - 我假设您说的是光线照射到显示器上。如果您的意图不是风格化而是可用性，您可能想要尝试程序遍历，将背景颜色和颜色标签转换为 HSB，更改亮度，然后返回 RBG/hex。取决于页面的大小，取决于您的要求，取决于意图。您可以将一个类附加到所有可能接受此类更改的元素。对于图片，您可以预先加载 2 张相互重叠的图片，然后通过切换不透明度来调整亮度（就像在浅色副本/深色副本之间切换的滑块）。

【讨论】：

【解决方案3】：

我确实在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 全天候使用，并且他们希望夜间使用低对比度的主题。虽然我喜欢横向，但样式表已经完成，并且与大多数项目一样，时间决定了最快——呃，最便宜——的解决方案。

【讨论】：

【解决方案4】：

简单的回答，您只需要在样式表中添加一些有针对性的内容。

顺便说一句，根据我对主题设置服务器端的要求的理解，我的理解是主题每天至少会活动几个小时。

<!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>

【讨论】：