Я пытаюсь изменить стили CSS, щелкнув по кнопке.Как изменить атрибут src в таблице стилей
<head>
<link id='link01' rel="stylesheet" href="blue.css">
</head>
JS
$('.pointcolors').click(function(){
var theme = $(this).attr('data-theme') + '.css';
console.log(theme); // green.css - it's ok
$('#link01').attr('src', theme);
});
Но нет никаких изменений в стиле. Ничего не произошло.
Любая помощь?
Я думаю:
$('#link01').attr('src', theme);
Должно быть:
$('#link01').attr('href', theme);
Изменить
$('#link01').attr('src', theme);
To:
$('#link01').attr('href', theme);
Если вы посмотрите на ссылку теге атрибут, который содержит имя файла является "HREF", а не "SRC".
Вы можете сделать это следующим образом:
Использование JQuery-х
.attr()изменитьhrefpropertylinkтег.
$(function() {
\t $("#block a").on('click', function() {
theme = $(this).data('theme');
\t \t $("#link01").attr("href", theme + '.css');
console.log("Stylesheet changed to: " + $("#link01").attr("href"));
\t \t return false;
\t });
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link id='link01' rel="stylesheet" href="blue.css">
<div id="block">
<a href="#" data-theme="green">Change Stylesheet Link</a>
</div>Надеется, что это помогает!
Изменение src до href должно работать.
$('#link01').attr('href', theme);
Возможно, вы изменили URL-адрес, но это не обязательно означает, что он загрузит новый. –
Возможный дубликат [Могу ли я загружать внешние таблицы стилей по запросу?] (Http://stackoverflow.com/questions/2126238/can-i-load-external-stylesheets-on-request) –