Изменение цвета окна при щелчке с помощью JS

bmjanuska спросил: 13 июня 2018 в 12:05 в: javascript

Новое в js и может использовать некоторую справку. Я пытаюсь изменить цвет окна после нажатия кнопки синего цвета. Могу ли я просто использовать js для изменения цвета ящика или мне нужна некоторая css-магия?

$("#btn1").on("click", function() {
  $("#box").animate({
    height: "+=35px",
    width: "+=35px"
  }, "fast");
})

$("#btn2").on("click", function() {
  $("box")({
    backgroundColor: "blue"
  });
})

$("#btn3").on("click", function() {
  $("#box").fadeOut();
})

$("#btn4").on("click", function() {
  $("#box").animate({
    height: "150px",
    width: "150px"
  }, "fast");
  $("#box").fadeIn(), "fast";

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

<div id="box" style="height:150px; width:150px; background-color:pink; margin:25px;"></div>

<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>

3 ответа

Есть решение
zer00ne ответил: 13 июня 2018 в 12:56

Как говорит Heretic Monkey о недостающем коде, поскольку Гузз упомянул, что вам не хватает метода .css(), и, как сказал Рафв, ваш селектор ошибочен, это должен быть $('#box'). Я сделаю еще один шаг в духе кода и анимирую изменение цвета:

$("#box").animate().css({
  backgroundColor: "blue"
}, 2500);

и, что еще важнее, добавьте это в CSS:

#box {
  transition: background-color 2.5s ease-out
}

В качестве бонуса функция сброса переписывается так, что методы привязаны и расположены так, что каждая анимация может быть обращена в обратном порядке.

...
  $("#box").fadeIn("fast").animate({
    height: "150px",
    width: "150px"
  }, "fast").css({
    backgroundColor: "pink"
  }, 1500);
...

Demo

$("#btn1").on("click", function() {
  $("#box").animate({
    height: "+=35px",
    width: "+=35px"
  }, "fast");
});

$("#btn2").on("click", function() {
  $("#box").animate().css({
    backgroundColor: "blue"
  }, 2500);
});

$("#btn3").on("click", function() {
  $("#box").fadeOut();
});

$("#btn4").on("click", function() {
  $("#box").fadeIn("fast").animate({
    height: "150px",
    width: "150px"
  }, "fast").css({
    backgroundColor: "pink"
  }, 1500);
});
#box {
  transition: background-color 2.5s ease-out
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

<div id="box" style="height:150px; width:150px; background-color:pink; margin:25px;"></div>

<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>
bmjanuska ответил: 13 июня 2018 в 01:57
Вау, спасибо за замечательные советы и трюки! Я обязательно буду использовать. Большое вам спасибо за прекрасную помощь!
zer00ne ответил: 13 июня 2018 в 01:59
Рад, что смог помочь. Счастливое кодирование!
Get Off My Lawn Guzz ответил: 13 июня 2018 в 12:14

Ваша функция jquery должна быть:

$("box").css({backgroundColor:"blue"});

http://api.jquery.com/css/

Rafv ответил: 13 июня 2018 в 12:24

Вам не хватает # в разделе box и для не-множественных css, лучше используйте

$("#box").css("background-color", "blue");

css (" propertyname"," value");

Подробнее об этом здесь.

bmjanuska ответил: 13 июня 2018 в 01:55
Спасибо!!! Я не знаю, как я это пропустил. Спасибо огромное!

Дополнительное видео по вопросу: Изменение цвета окна при щелчке с помощью JS

Основы javascript 18 — Изменение стилей элемента.

Уроки JavaScript Практика #6 Учимся делать модальные окна

Модальное окно (попап) на сайте без плагинов, своими руками. HTML + CSS + jQuery