JQuery динамически меняет тему CSS - принудительно обновляет класс?

Question

У меня есть веб-страница с темой css. Когда я нажимаю кнопку, тема меняется на другой файл, но по мере того, как я пытаюсь использовать некоторые новые свойства темы, я вижу, что они все еще не обновляются в элементах.

The 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.