更改 CSS 文件时元素样式未更新答案

【问题标题】：Element styles not updating when changing CSS file更改 CSS 文件时元素样式未更新
【发布时间】：2012-08-07 12:43:17
【问题描述】：

所以我有 2 个 css 文件 - light.css 和 dark.css。我在页面上有一个按钮，可以在这两个 css 文件之间切换 <link> 元素的 'href' 属性。

现在，我有一个<div>，它的背景样式默认来自 light.css。将“href”属性更改为“dark.css”后，div 不会采用 dark.css 中提供的新样式代码...

有什么想法吗？

== 编辑：添加代码 sn-ps...

把JS改成<link>：

var nightMode = false;
var theme = document.querySelector('#theme');
// Where <link id="theme" style="text/css" rel="stylesheet" href="light.css">

function toggleNight()
{
    if (!nightMode)
    {
        setTimeout("theme.setAttribute('href', '_css/dark.css')", 400);
        nightMode = true;
    }
    else
    {
        setTimeout("theme.setAttribute('href', '_css/light.css')", 400);
        nightMode = false;  
    }
}

除此之外，CSS 文件如下所示：

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}

【问题讨论】：

样式转换器确定有效吗？
在link 上发布有关更改href 的代码，并发布您的相关CSS
请发布您用来更改href的代码
也许你可以看看这个：stackoverflow.com/questions/2024486/…
我知道这不是你问的，而是加载一个新的 css 表，你能不能将样式合并到一张表中并使用 .addClass （或类似的东西）在它们之间切换？

标签： css

【解决方案1】：

您的 jQuery/javascript 代码显然是错误的，请尝试以下操作：

$('button').click(function(){
  if ($('link[href*="temp1"]').length > 0)
      $("link").attr('href',"http://ajthomas.co.uk/temp2.css");
  else
      $("link").attr('href',"http://ajthomas.co.uk/temp1.css");
});

这是一个小提琴 - http://jsfiddle.net/Xtjv2/

更新

只是为了排除它，尝试改变你的 CSS：

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}

收件人：

// light.css
div{background-color:#ddd;}

// dark.css
div{background-color:#333;}

【讨论】：

直截了当地说我的代码是错误的，甚至没有看它，这有点傲慢。只是让你知道，我有几个不同的元素，它们的样式正在改变，除了一个特定的 div ......我不知道为什么，所以这个问题。至于你的 jQuery 代码，它在功能上与我的 vanilla 代码没有什么不同。
好的，无需备份。也许下次尝试发布一些代码，我们不必假设。 “除了特定的 div”如果是这种情况，您确定您在 CSS 中正确选择了它吗？不会混淆 ID 和类？
是的，元素选择是正确的......如果我默认加载dark.css，它会应用所需的样式......它只是在页面完成加载后切换css文件时使它看起来好像文件本身已加载，但元素坚持使用原始样式...
所有其他元素都改变了，只是不是 div？
是的...原来浏览器加载新的 CSS 文件但没有刷新所有元素的样式有问题...我在 div 之前放置了 HTML 元素（div 很早在页面上）并且它们也没有改变......快速卸载/重新安装浏览器并重新启动系统，问题似乎已经解决......

【解决方案2】：

我从这个网站稍微更改了来源：Changing external CSS file with Javascript。

我认为这是您希望这样做的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Changing CSS extern file using only JavaScript</title>
    <link id="changeCSS" rel="stylesheet" type="text/css" href="positive.css"/>
    <script type="text/javascript">
      function changeCSS() {

        var oldlink = document.getElementById("changeCSS");
        var cssFile;

        if(oldlink.getAttribute('href') === 'positive.css') {
          cssFile = 'negative.css';
        }
        else {
          cssFile = 'positive.css';
        }

        var newlink = document.createElement("link");
        newlink.setAttribute("id", "changeCSS");
        newlink.setAttribute("rel", "stylesheet");
        newlink.setAttribute("type", "text/css");
        newlink.setAttribute("href", cssFile);

        document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
      }
    </script>
  </head>
  <body>
    <button onclick="changeCSS();">change</button>
    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </body>
</html>

我希望这就是您所寻找的。如果您不理解代码，请询问。

【讨论】：