Почему не добавляется класс?

Question

[dhat]

Разбираюсь с JS, пытаюсь добавить к элементу класс при скролле. Код не работает, хотя в консоле нету ошибок:

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  document.getElementById('name').classList.add('red');
}

Answer 1

[Archakov Dennis]

Попробуй так.

window.onscroll = function() {
  var scrolled = window.pageYOffset || document.documentElement.scrollTop;
  document.getElementById('name').className += 'red';
}

Comments

[dhat]

Если я ничего не напутал, то не работает ваш код - codepen.io/dhatt/pen/bwwKRJ

[Archakov Dennis]

dhat: работает. Надо поставить пробел, перед red. += ' red' и не .red, .red a

[dhat]

Im Archakov: ок, работает, но не совсем понятно что это за хаки с += 'red', да еще и пробел загадочный... Хотелось бы решение более близкое к спецификации.

[Антон]

dhat: это не хаки, а нормальный функционал языка

[dhat]

Антон: а для чего пробел? Ниразу не встречал и не могу понять смысл.

[Антон]

dhat: потому что className - это строка, в которой классы разделены пробелом. Но уже давно для этого есть classList.add('твой класс'), как это сделал товарищ Алексей Ярков

[dhat]

Антон: спасибо, теперь ясно.