Как сделать меняющийся фон по нажатии кнопки? [закрыт]

211

31 октября 2018, 05:50

Например: я нажимаю на кнопку и у сайта меняется цвет фона, или меняется логотип в шапке, или же просто меняется дизайн сайта (цвет кнопок, цвет меню и фон), возможно ли такое реализовать?

Answer 1

Создаем color-1.css:

body {
    background-color: #ffe5e5;
}

Создаем color-2.css:

body {
    background-color: #e5e9ff;
}

Создаем index.html:

<html>
<head>
    <link rel="stylesheet" href="color-1.css" data-style="styles">
</head>
<body>
<div class="colorbox" attr-css="color-2">Color-2</div>
<div class="colorbox" attr-css="color-1">Color-1</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$('.colorbox').on('click',function(){
    var link = $('link[data-style="styles"]');
    var stylesheet = $(this).attr('attr-css');
    link.attr('href', '' + stylesheet + '.css');
});
</script>
</body>
</html>

Запускаем, кликаем на текст Color-2 - фон должен поменяться, потом на Color-1 - фон должен вернуться в исходное положение. Принцип ясен, вот так и делать.

Answer 2

В php не знаю, а вот в JS нативный метод elem.classList.toggle("class"), но если класса class нет, добавляет его, если есть – удаляет.