Добавить еще один класс в div

У меня есть функция, которая проверяет возраст отправки формы, а затем возвращает новое содержимое в div в зависимости от их возраста. Прямо сейчас я просто использую getElementById для замены содержимого HTML. Но я думаю, что будет лучше для меня, если бы я тоже мог добавить класс в div. Так например у меня есть.

if (under certain age) {
    document.getElementById('hello').innerHTML = "<p>Good Bye</p>"; 
    createCookie('age','not13',0)
    return false;
} else {
    document.getElementById('hello').innerHTML = "<p>Hello</p>";  
    return true;
}

То, что я хотел бы сделать, это иметь все в div, и если вернуть false, то div исчезает и заменяется другим содержимым. Могу ли я получить какие-либо идеи о том, как добиться этого с чистым JavaScript. Я не хочу использовать jQuery для этой конкретной функции.

Ответ 1

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

  var el = document.getElementById('hello');
  if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
  }

Ответ 2

Используйте Element.classList

document.getElementById('hello').classList.add('someClass');

Метод .add добавит класс, только если он еще не существует в элементе. Поэтому не нужно беспокоиться о дублирующих именах классов.

Ответ 3

Вы можете добавить класс к элементу className с ведущим пространством.

document.getElementById('hello').className += ' new-class';

См. https://developer.mozilla.org/En/DOM/Element.className

Ответ 4

Ну, вам просто нужно использовать document.getElementById('hello').setAttribute('class', 'someclass');.

Также innerHTML может привести к неожиданным результатам! Рассмотрим следующее:

var myParag = document.createElement('p');

if(under certain age)
{
    myParag.text="Good Bye";
    createCookie('age', 'not13', 0);
    return false;
{
else
{
    myParag.text="Hello";
    return true;
}

document.getElementById('hello').appendChild(myParag);

Ответ 5

В DOM класс элемента - это просто каждый класс, разделенный пробелом. Вам просто нужно реализовать логику синтаксического анализа, чтобы вставить/удалить классы по мере необходимости.

Интересно, почему... почему бы вам не использовать jQuery? Это делает эту проблему тривиально легкой.

Ответ 6

Я использую функцию ниже для анимации значка шестеренки UiKit, используя только JavaScript

document.getElementById("spin_it").onmouseover=function(e){
var el = document.getElementById("spin_it");
var Classes = el.className;
var NewClass = Classes+" uk-icon-spin";
el.className = NewClass;
console.log(e);
}

<span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span>

Ответ 7

Я столкнулся с той же проблемой. Если родительский элемент скрыт, то после показа выпадающего элемента элемент не отображается. Это не идеальное решение, но оно решило мою проблему. После отображения элемента вы можете использовать следующий код.

function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); }