Проверка исходного кода и его изменений при смене темы, это действительно довольно просто. Digg использует потрясающий CSS, чтобы радикально изменить контент, просто изменив класс элемента. Все, что вам нужно сделать, это:
<div id="theme_viewer">
<!-- HTML code for your widget/thing to be styled -->
</div>
И тогда вы можете иметь свои темы:
<ul>
<li><a href="#" onclick="return switchTheme('theme1');">theme 1</a></li>
<li><a href="#" onclick="return switchTheme('theme2');">theme 2</a></li>
<li><a href="#" onclick="return switchTheme('theme3');">theme 3</a></li>
<li><a href="#" onclick="return switchTheme('theme4');">theme 4</a></li>
</ul>
Все, что нужно switchTheme, - это изменить класс theme_viewer на переданный класс:
function switchTheme(theclass) {
var viewer = document.getElementById('theme_viewer');
viewer.className = theclass;
return false;
}
Ваши таблицы стилей CSS могут затем выполнять любые вызовы различных стилей:
#theme_viewer.theme1 {
background-color: red;
}
#theme_viewer.theme2 {
background-color: blue;
}
#theme_viewer.theme3 {
background-color: black;
color: white;
}
#theme_viewer.theme4 {
background-color: orange;
}
вот пример этого на работе
Как уже упоминалось в комментариях J-P и в ответе Эдеверетта, не стоит вставлять ваши события так, как они есть в этом примере (то есть с атрибутом onclick). Я сделал это для простоты, но это не очень хорошая идея. Лучшая идея - дождаться загрузки вашего документа и динамически присоединить обработчики событий с помощью Javascript. Это известно как ненавязчивый Javascript, и это хорошая вещь TM .
Пример вышеприведенного примера, основанный на передовой практике, будет выглядеть так:
<ul id='theme_options'>
<li><a href="#" id='theme1'>theme 1</a></li>
<li><a href="#" id='theme2'>theme 2</a></li>
<li><a href="#" id='theme3'>theme 3</a></li>
<li><a href="#" id='theme4'>theme 4</a></li>
</ul>
И затем мы используем эту кросс-браузерную функцию addEvent (, написанную Джоном Резигом, автором jQuery):
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
Чтобы добавить обработчики событий:
addEvent(window, 'load', function() {
var opts = document.getElementById('theme_options');
var links = opts.getElementsByTagName('a');
for(var x = 0; x < links.length; x++) {
addEvent(links[x], 'click', function() {
switchTheme(links[x].id);
});
}
});
Это может быть немного более многословно, чем встроенный Javascript, но оно того стоит. Я знаю, вы сказали, что хотели бы избежать jQuery, но что-то такое простое, как это, заставляет вас начать ценить библиотеку, как вы могли бы сделать это с jQuery с помощью чего-то такого простого:
$(function() {
$('a','#theme_options').click(function() {
switchTheme($(this).attr('id'));
return false;
});
});