1

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

function hideShadow() {
  var el = document.getElementById("shadow");
  el.style.boxShadow = "0 0 0 0";
  el.style.textShadow = "none";
}

function buttonName() {
  var x = document.getElementById("buttonChange");
  x.innerHTML = "Show shadow";
}
body {
  background-color: pink;
  padding-top: 50px;
}

.BoxShadow {
  text-align: center;
  line-height: 50px;
  text-shadow: 10px 5px 8px grey;
  font-size: 30px;
  background: white;
  margin: 0 auto;
  border: 1px solid black;
  width: 400px;
  height: 50px;
  box-shadow: 0 0 30px 5px blue, 0 0 20px 20px grey, 0 0 20px 30px #B0E0E6;
}

.button {
  text-align: center;
}

button {
  margin: auto;
  margin-top: 30px;
  background-color: black;
  border: 1px solid black;
  border-radius: 3px;
  width: 150px;
  height: 45px;
  color: white;
  font-size: 16px;
}
<html>

<head>
  <title>Page Title</title>
</head>

<body>
  <div id="shadow" class="BoxShadow">SOLOLEARN</div>
  <div class="button">
    <button id="buttonChange" onclick="hideShadow(); 
     buttonName();">Hide shadow</button>
  </div>
</body>

</html>

1
  • как эти свойства устанавливаются изначально? innerHTML - никак не обратить, только сохранять предыдущий результат в переменную
    – Grundy
    7 ноя 2017 в 20:35

2 ответа 2

3

Самый лучший вариант, это не стили менять в js, а классы, что можно сделать в css, должно быть сделано в css, я тебе добавил стили, увидешь... A в JS просто добавояешь или удаляешь класс... А что касается кнопки, простой тернарник...

var shadow = document.getElementById("shadow"),
  buttonChange = document.getElementById("buttonChange");;
/*в место onclick в html лучше использовать  addEventListener */
buttonChange.addEventListener('click', function() {
  /*classList.toggle меняет класс если ето удаляет если нет добавляет */
  shadow.classList.toggle('shadow');
/* а это тернанрный оператор просто аналог if с одним условием если Hide shadow
меняеи на Show shadow  если нет меняем на Hide shadow
*/
  buttonChange.innerHTML == 'Hide shadow' ?
    buttonChange.innerHTML = 'Show shadow' :
    buttonChange.innerHTML = 'Hide shadow';
})
body {
  background-color: pink;
  padding-top: 50px;
}

.BoxShadow {
  text-align: center;
  line-height: 50px;
  text-shadow: 10px 5px 8px grey;
  font-size: 30px;
  background: white;
  margin: 0 auto;
  border: 1px solid black;
  width: 400px;
  height: 50px;
  box-shadow: 0 0 30px 5px blue, 0 0 20px 20px grey, 0 0 20px 30px #B0E0E6;
}

.BoxShadow.shadow {
  text-align: center;
  line-height: 50px;
  text-shadow: none;
  font-size: 30px;
  background: white;
  margin: 0 auto;
  border: 1px solid black;
  width: 400px;
  height: 50px;
  box-shadow: 0 0 0 0;
}

.button {
  text-align: center;
}

button {
  margin: auto;
  margin-top: 30px;
  background-color: black;
  border: 1px solid black;
  border-radius: 3px;
  width: 150px;
  height: 45px;
  color: white;
  font-size: 16px;
}
<div id="shadow" class="BoxShadow">SOLOLEARN</div>
<div class="button">
  <button id="buttonChange">Hide shadow</button>
</div>

10
  • как минимум нужны пояснения, что происходит в коде в ответе. Ну и если вдруг поменяется background по умолчанию, надо будет лезть в код и менять строку
    – Grundy
    7 ноя 2017 в 20:33
  • Есть кнопка, которой присвоено событие onclick="hideShadow(); buttonName();" Если нажать на кнопку, удаляется тень блока и надпись на самой кнопке. Мне надо, чтобы при повторном клике вернулась тень и надпись на кнопке. Сори парни, но ваш ответ мне не понятен, но спасибо, что откликнулись. Новачку всегда тяжко)
    – Adel Adel
    7 ноя 2017 в 20:42
  • @Adel, выдложи сюда и html css, что бы выдеть общую картину, и я тебе ответ с пояснениями напишу...
    – Air
    7 ноя 2017 в 20:59
  • добавила код html/css
    – Adel Adel
    7 ноя 2017 в 21:07
  • @Adel, разобралась?
    – Air
    8 ноя 2017 в 10:16
-1

Сначала запиши нужные свойства в переменную, потом измени, - когда будет нужно вернуть значения свойств - подставь из переменных

0

Ваш ответ

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

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