<link rel="stylesheet" href="путь до файла со стилями">
$('#blackstyle').click(function (){
$('link[href="style1.css"]').attr('href', 'style2.css');
});
$('#original').click(function (){
$('link[href="style2.css"]').attr('href', 'style1.css');
});
// Добавление link
$link = $('<link/>', {
rel: 'stylesheet',
href: 'путь...'
}).appendTo('head');
// Немного позже удаление ранее созданного link
$link.remove();body, а новое оформление задавать в том же файле стилей, но добавив к селекторам body.новыйКласс:<html>
<head>
<script src="js/jquery.js"></script>
<style>
.content { color: black; } /* Обычное оформление */
body.otherStyle .content { color: red; } /* Новое оформление */
</style>
</head>
<body>
<div class="content">Lorem ipsum</div>
<button id="button">Поменять всё</button>
<script>
$('#button').click(function(event) {
// Нажатие кнопки будет добавлять класс, если его нет, и удалять его, если есть, тем самым включая/выключая другое оформление
$('body').toggleClass('otherStyle');
event.preventDefault();
});
</script>
</body>
</html>
// Подключает
function addStyleSheets (href) {
var $head = document.head,
$link = document.createElement('link');
$link.rel = 'stylesheet';
$link.href = href;
$head.appendChild($link);
}
// Отключает по ссылке
function disableStyleSheets (href) {
var styles = document.styleSheets;
for (i in styles) {
if (styles[i].href == href) {
styles[i].disabled = true;
}
}
}
// Примеры
addStyleSheets('путь/до/файла/со/стилями.css'); // Подключаем
disableStyleSheets('путь/до/файла/со/стилями.css'); // Отключаем// Вариант для IE10+
var $body = document.querySelector('body');
$body.classList.toggle('red-theme'); // удалит/добавит класс .red-theme для <body>
Простой
Простой