Question

我有一个css主题的网页。当我单击一个按钮时，主题会更改为另一个文件，但是当我尝试使用一些新的主题属性时，我发现它们仍未在元素中更新。

css文件非常简单：

red.css

.square{ background-color:red; }

blue.css

.square{ background-color:blue; }

index.html文件：

<link rel="stylesheet" id="theme" href="red.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="mydiv" class="square" style="width:100px; height:100px;"></div>
<button id="mybutton">Change Theme!</button>

<script>
$('#mybutton').on('click', function(){
    console.log($('.square').css("background-color"));
    $('#theme').attr('href', 'blue.css');
    console.log($('.square').css("background-color"));
    alert('When this alert runs, square will still be red, even though the css file has already been switched');
});
</script>

此示例可在此处访问：http://herofocus.com/temp/

有没有办法强制刷新DOM，这样当Alert运行时，主题会被更改？

Answer 1

问题不在于DOM还没有刷新，而是当你更改href时你的浏览器需要再次下载CSS（或者至少检查一下）反对缓存）。因此，在打印CSS时它尚未加载（因为JS在设计上是异步的）。

相反，您可能希望以更受控制的方式加载CSS并使用回调打印新值，例如参见https://stackoverflow.com/a/13610128/1598293。

Answer 2

您的代码工作正常，您只需让浏览器完全加载即可。试试这个（未经测试）：

<link rel="stylesheet" id="theme" href="red.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="mydiv" class="square" style="width:100px; height:100px;"></div>
<button id="mybutton">Change Theme!</button>

<script>
$(document).ready(function(){('#mybutton').on('click', function(){
    console.log($('.square').css("background-color"));
    $('#theme').attr('href', 'blue.css');
    console.log($('.square').css("background-color"));
    alert('When this alert runs, square will still be red, even though the css file has already been switched');
});
});

Answer 3

将css更改后的所有内容放在setTimeout()中，以便在代码运行之前为DOM提供更新机会。

$('#theme').attr('href', 'blue.css');
setTimeout(function(){
    alert("'When this alert runs, square will be blue!"); 
}, 0);

注意：这取决于blue.css加载速度非常快或预加载。有关处理<link> onload事件事件的更强大（且复杂）的解决方案，请参阅@S0lll0s answer。

Jquery动态更改CSS主题 - 强制更新类？

3 个答案: