Question

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

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

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

我是否缺少修复，或者我是否必须在一个CSS文件中包含所有内容？

修改

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

的副本

Answer 1

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

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

<body class="LightTheme">

然后

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

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

Answer 2

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

然而，我的答案与斯蒂芬的答案相同。

你提到了环境光 - 我假设你在谈论光照击显示器。如果意图不是关于程式化而是关于可用性，你可能想尝试程序遍历，转换背景颜色＆amp;颜色标签到HSB，改变亮度，然后回到RBG / hex。取决于您的要求，取决于意图，页面的大小。您可以将类附加到可能接收此类更改的所有元素。关于图像，您可以预先加载彼此重叠的2个图像，然后通过切换不透明度来调整亮度（如在浅色复印/深色复印之间滑动）。

Answer 3

我确实在this question中找到了答案，但我必须多做一点才能让它适合我。切换在IMG标记上执行，标识为ToggleStyle，因此我的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，是的，我的意思是光线照在显示器上，因为这个应用程序将全天候使用，他们希望夜间使用低对比度主题。虽然我喜欢横向，但样式表已经完成，并且像大多数项目一样，时间决定了最快，最便宜的解决方案。

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

使用jQuery更改样式表href并不是很有效

4 个答案: