Почему я не могу изменить стили элемента по их классу?

#javascript #html #css

Подскажите, пожалуйста, почему по id могу изменять свойства элемента, а по классу - нет?



function show(){
  document.getElementById('idsquare').style.display = "none";
  document.getElementsByClassName('square').style.display = "none";
  }
.square, #idsquare{
  width: 100px;
  height:100px;
  }
  
.square{
  background-color: #FF6699
}

#idsquare {
  background-color: #FF0099
}
Нажми меня!





    

Ответы

Ответ 1

Это потому, что  ID может быть только один у элемента и в единственном экземпляре
на всей странице , а классов одинаковым множество, или надо прописать индекс класса,
как я сделал или прокручивать все классы в цикле



function show(){
  document.getElementById('idsquare').style.display = "none";
  document.getElementsByClassName('square')[0].style.display = "none";
  }
.square, #idsquare{
  width: 100px;
  height:100px;
  }
  
.square{
  background-color: #FF6699
}

#idsquare {
  background-color: #FF0099
}
Нажми меня!




Ответ 2

Если элемент с классом square один на странице - то вам нужно брать нулевой элемент, т.е.

function show(){
  document.getElementById('idsquare').style.display = "none";
  document.getElementsByClassName('square')[0].style.display = "none";
  }


А вообще, лучше не изобретать велосипеды, а сделать на jQuery, в котором есть свои
функции show и hide. И почему-то ваша функция show не показывает элементы, а призвана
их прятать. В связи с этим, рекомендую к прочтению: Как не надо писать код
UPD
Если у вас будет много элементов с классом square - ваш код сработает только для
самого первого. Чтобы спрятать все элементы с таким классом, вам поможет такой код:

$('.square').hide();