Переключить цвет сайта

0

В настоящее время я использую дизайн, который я сделал, используя следующий учебник, чтобы иметь как черно-белый фон на моем веб-сайте:

http://designshack.net/articles/css/lightsoff/

Хотя этот учебник несколько выполняет свою работу (очень чувствителен к изменению фрагментов html/css вокруг), я действительно ищу более элегантную реализацию. Есть ли способ создать переключатель toggle'd с использованием jquery или javascript, который позволяет изменять цвет фона всего веб-сайта?

Я только что выбрал веб-программирование как хобби около недели назад, поэтому я очень мало знаю о javascript и jquery прямо сейчас.

EDIT: У меня есть статический сайт, и я не слишком обеспокоен работой, так как единственный человек, смотрящий на этот сайт, будет 99,9% времени.

Теги:
toggle

5 ответов

1
Лучший ответ

Напишите это в 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>

Надеюсь, ты получил свой аз. :)

  • 0
    Нужно ли добавлять какой-либо CSS или <button onclick = "... создать кнопку при использовании javascript? В настоящее время у меня есть кнопка, созданная с помощью CSS из руководства, которое я опубликовал в своем исходном сообщении, однако я не уверен если использовать javascript создаст свою кнопку или нет
1

Вы можете создать отдельный файл 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

1

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 только для одного приложения может быть излишним, но это самый простой способ выполнить то, что вы хотите без опыта, и это библиотека, в которой вы можете сделать гораздо больше, если вы погрузитесь в нее глубже. Удачи!

1

Назовите свой веб-сайт, используя то, что вы предпочитаете в качестве цветовой схемы по умолчанию. Затем создайте css для альтернативных цветовых схем, которые находятся под подклассом темы. Например:

p,h1 {color:red;]
.blue-theme p,h1 {color:blue;}

Затем просто используйте javascript или серверные переменные, чтобы добавить класс "синяя тема" в свой тег тела или корневого элемента. Это также облегчает переход между темами, если вы применяете переход css!

Это не самый эффективный с точки зрения размеров загрузки, так как ваш CSS файл будет немного больше, а производительность не оптимальна, так как добавление темы будет стоить времени обработки, но для общего использования я считаю, что это лучший способ добиться этого.

0

Я не собираюсь дать вам точно код, но определенно заглянуть в некоторые из функций обновления javascript и реализовать css. Возможно, загрузите различные файлы css в качестве цветов для вашего сайта.

  • 0
    Это работает на статических сайтах?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню