Как менять стили блока после нажатия на другой блок?

Question

[Pavel_Proca]

Вот мой код. Проблема в том, что он работает только в одну сторону. Не могу понять причину. Помогите, пожалуйста. Если есть метод как сделать это легче, буду рад узнать.
HTML

<div id="p2">Hello World!</div>
<div onClick="change()">Click</div>

CSS
div {display: inline-block; background: red;}
JAVASCRIPT

function change() {
  if (document.getElementById("p2").style.display = "inline-block") {
    document.getElementById("p2").style.display = "none";
  }
  else if (document.getElementById("p2").style.display = "none") {
    document.getElementById("p2").style.display = "inline-block";
  }
}

Answer 1

[Сергей Волевач]

Можно создать класа со стилем. И производить просто его удаление и добавление.

.hidden {
  display: none;
}

function change() {
  document.getElementById("p2").classList.toggle('hidden');
}

Answer 2

[Kovalsky]

1. element.style.* атрибуты мапятся напрямую в style атрибут элемента. То есть с помощью element.style.* можно получить только те свойства, которые, собственно, прописаны в атрибуте style у элемента. На вашем примере: ваш элемент #p2 не имеет атрибута style вообще. Чтобы получить rendered (рассчитанные, примененные) стилевые свойства элемента, надо использовать window.getComputedStyle(el)

2.

if (document.getElementById("p2").style.display = "inline-block") {
  document.getElementById("p2").style.display = "none";
}

В этой строке вы сначала присваиваете style.display значение "inline-block", т.к. используете оператор присваивания (=) вместо операторов сравнения. Эта операция возвращает строку "inline-block", которая конвертируется в true, таким образом благополучно выполняется блок условного оператора, в котором происходит еще одно присвоение style.display = "none";.

Отвечая на ваш вопрос "Как менять стили блока после нажатия на другой блок?" - мне кажется, для этого удобнее работать с классами: добавить в CSS класс с нужными стилями, по клику на кнопку добавлять/убирать класс с элемента.

Answer 3

[AlexRas]

https://jsfiddle.net/5p2a2unu/

Answer 4

[lega]

https://jsfiddle.net/f5esm50j/