3

Подскажите, пожалуйста, почему по 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
}
<a href="#" onclick="show()">Нажми меня!</a>
<div class="square"></div>
<div id="idsquare"></div>

3
  • 1
    Потому что там массив элементов document.getElementsByClassName('square'), а не один элемент как document.getElementById('idsquare').
    – Visman
    11 окт 2017 в 8:19
  • 1
    Вон, в ответе, доступ к первому элементу показали. Аж два раза :)
    – Visman
    11 окт 2017 в 8:22
  • @Visman спасибо) 11 окт 2017 в 8:23

2 ответа 2

7

Это потому, что 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
}
<a href="#" onclick="show()">Нажми меня!</a>
<div class="square"></div>
<div id="idsquare"></div>

4
  • 1
    Ого! Спасибо, приму как ответ....когда смогу) 11 окт 2017 в 8:22
  • всегда пожалуйста)))
    – Air
    11 окт 2017 в 8:23
  • А есть ли способ в HTML задать свои индексы(ключи)?
    – Lestalab
    11 окт 2017 в 12:52
  • Если честно не понял о чем вы? Что вы имеете ввиду под словом индексы и ключи?
    – Air
    11 окт 2017 в 13:32
3

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

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

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

$('.square').hide();
1
  • 2
    Читала) мне просто надо было на простейшем примере продемонстрировать работу куска кода из реального проекта (где как раз показывает объекты кнопка, а не скрывает), накидала простейший образец. 11 окт 2017 в 8:25

Ваш ответ

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

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