Добавление класса в DIV с помощью javascript

178
18

Пример HTML:


<div id="foo" class="class_one"></div>

Как добавить класс class_two без замены class_one?


конечный результат:


<div id="foo" class="class_one class_two"></div>

спросил(а) 2021-01-19T19:29:06+03:00 2 месяца, 3 недели назад
1
Решение
297

Стандартный javascript:


document.getElementById('foo').className += ' class_two'

или JQuery:


$('#foo').addClass('class_two');

ответил(а) 2021-01-19T19:29:06+03:00 2 месяца, 3 недели назад
182

Вы можете использовать jQuery.


$('#YourElement').addClass('YourClass'); //add

$('#YourElement').removeClass('YourClass'); //remove

$('#YourElement').toggleClass('YourClass'); //toggle

Или Javascript, если хотите.


document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove

ответил(а) 2021-01-19T19:29:06+03:00 2 месяца, 3 недели назад
122

Отметьте этот, чтобы добавить класс:


document.getElementById('foo').classList.add("class_two");

Я считаю, что это лучшее решение.

ответил(а) 2021-01-19T19:29:06+03:00 2 месяца, 3 недели назад
88

Вы можете сделать жизнь проще с помощью нескольких вспомогательных функций:


function addClass(el, className) {
var classes = el.className.match(/\S+/g) || [];

if (!hasClass(el, className)) {
classes.push(className);
}
el.className = classes.join(' ');
}

function hasClass(el, className) {
var re = new RegExp('(^|\\s+)' + className + '(\\s+|$)');
return re.test(el.className);
}

addClass(document.getElementById('foo'), 'bar')

ответил(а) 2021-01-19T19:29:06+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема