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 класс с нужными стилями, по клику на кнопку добавлять/убирать класс с элемента.