0

У меня такая проблема:

 <a href="#" class="btn btn-lg btn-default" onclick="red()">Change Background</a>


function red(){
    document.body.style.backgroundColor="#C0C0C0";
}

Создал кнопку на странице, которая меняет background. А как сделать так, чтобы при нажатии на эту же кнопку все вернулось в исходное состояние, и так переключалось с одного фона на другой при каждом нажатии?

4 ответа 4

4

    function red() {
       document.body.classList.toggle('red-background');
    }
body {
    background-color: #FFFFFF;
}

body.red-background {
    background-color: red;
}
<a href="#" onclick="red()">Change Background</a>

3
  • Самый лучший вариант из (пока) предложенных.
    – cyadvert
    17 дек 2015 в 14:02
  • Благодарю Павел! 17 дек 2015 в 14:25
  • @EdgarKiljak всегда пожалуйста. Если ответ устраивает, то вы можете его принять, чтобы закрыть вопрос 17 дек 2015 в 14:40
1

Ну тогда я бы сделал вот так. Но это явно не лучший вариант.

<a href="" onclick="bgcolor()">Change Background</a>
<script>
    k=1;
    function bgcolor(){
    if (k==1) {
        document.body.style.backgroundColor="#C0C0C0";
        k=0;
    }
    else {
        document.body.style.backgroundColor="#FFFFFF";
        k=1;
    }
    }
</script>
1
  • А вообще вариант товарища Pavel Parshin мне нравится намного больше :)
    – Telion
    17 дек 2015 в 14:00
1

Такой вариант подойдет?

var currentColor = '#FFFFFF'; // внешняя переменная будет зранить текущий цвет
function red() {
    // смотрим, какой цвет фона сейчас. 
    if (currentColor=="#C0C0C0") {// если фон #С0С0С0
        setColor = '#FFFFFF'; // будем менять на белый
    } else {
        setColor = '#C0C0C0'; // иначе, будем менять на серый
    }
    currentColor = setColor; // запоминаем цвет, чтобы знать в будущем текущий 
    document.body.style.backgroundColor = setColor; // именно замена фона
}

Однако, вариант @PavelParshin лучше этого. Советую использовать его.

6
  • Спасибо, но не хочет работать 17 дек 2015 в 13:53
  • а зачем вам currentColor если вы его нигде не используете?
    – Grundy
    17 дек 2015 в 13:56
  • @EdgarKiljak, описывайте точно, как именно не хочет работать, дает ошибку? ничего не делает? делает не так?
    – Grundy
    17 дек 2015 в 13:57
  • исправлено. Grundy - спасибо :) сплоховал...
    – cyadvert
    17 дек 2015 в 13:59
  • После исправления все стало работать, огромное спасибо! Я был бы еще больше благодарен если бы вы смогли мне объяснить каждый шаг 17 дек 2015 в 14:03
0

Еще один вариант с объектом

document.body.style.backgroundColor = '#FFFFFF';

var colors = {
  "red": document.body.style.backgroundColor
};

colors[document.body.style.backgroundColor] = "red";
print_color();

function red() {
  document.body.style.backgroundColor = colors[document.body.style.backgroundColor];
  print_color();
}

function print_color() {
  document.getElementById('p').innerHTML = JSON.stringify(colors,
    function(key, value) {
      if (key == "") return value;
      return value + (document.body.style.backgroundColor == key ? " - next color" : "");
    }, 2);

}
body {
  background-color: #FFFFFF;
}
body.red-background {
  background-color: red;
}
<a href="#" onclick="red();">Change Background</a>
<pre id="p"></pre>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.