В настоящее время я использую дизайн, который я сделал, используя следующий учебник, чтобы иметь как черно-белый фон на моем веб-сайте:
http://designshack.net/articles/css/lightsoff/
Хотя этот учебник несколько выполняет свою работу (очень чувствителен к изменению фрагментов html/css вокруг), я действительно ищу более элегантную реализацию. Есть ли способ создать переключатель toggle'd с использованием jquery или javascript, который позволяет изменять цвет фона всего веб-сайта?
Я только что выбрал веб-программирование как хобби около недели назад, поэтому я очень мало знаю о javascript и jquery прямо сейчас.
EDIT: У меня есть статический сайт, и я не слишком обеспокоен работой, так как единственный человек, смотрящий на этот сайт, будет 99,9% времени.
Напишите это в javascript
var i=1;
function myFun()
{
if(i%2==0)
document.body.style.backgroundColor="black";
else
document.body.style.backgroundColor="white";
i++;
}
в случае щелчка
<button onclick="myFun()">Click me</button>
Надеюсь, ты получил свой аз. :)
Вы можете создать отдельный файл css со стилями, определенными для всех необходимых элементов на странице, а затем динамически добавить css на страницу на основе щелчка кнопки или выбрать радио, как показано ниже.
$('head').append('<link rel="stylesheet" href="style1.css" type="text/css"/>');
а также
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css"/>');
Вот хороший учебник, который объясняет это
http://www.rickardnilsson.net/post/Applying-stylesheets-dynamically-with-jQuery
jQuery отлично подходит для того, чтобы начинающие добавляли этот тип функциональности на веб-сайты. Во-первых, настройте свой CSS так:
body {
background-color: #fff;
}
body.dark {
background-color: #000;
}
Это устанавливает значение по умолчанию css в белый цвет, а затем с помощью JavaScript вы добавите кнопку "click handler" к вам, указав атрибут id кнопок, чтобы изменить класс (и результирующий цвет):
$('#yourButtonID').click(function() {
$('body').toggleClass('dark');
});
Вы должны убедиться, что вы включили копию jQuery в тег, прежде чем выполнять приведенный выше код на странице.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
Использование jQuery только для одного приложения может быть излишним, но это самый простой способ выполнить то, что вы хотите без опыта, и это библиотека, в которой вы можете сделать гораздо больше, если вы погрузитесь в нее глубже. Удачи!
Назовите свой веб-сайт, используя то, что вы предпочитаете в качестве цветовой схемы по умолчанию. Затем создайте css для альтернативных цветовых схем, которые находятся под подклассом темы. Например:
p,h1 {color:red;]
.blue-theme p,h1 {color:blue;}
Затем просто используйте javascript или серверные переменные, чтобы добавить класс "синяя тема" в свой тег тела или корневого элемента. Это также облегчает переход между темами, если вы применяете переход css!
Это не самый эффективный с точки зрения размеров загрузки, так как ваш CSS файл будет немного больше, а производительность не оптимальна, так как добавление темы будет стоить времени обработки, но для общего использования я считаю, что это лучший способ добиться этого.
Я не собираюсь дать вам точно код, но определенно заглянуть в некоторые из функций обновления javascript и реализовать css. Возможно, загрузите различные файлы css в качестве цветов для вашего сайта.