przykładu HTML:Dodaj klasę do DIV z javascript
<div id="foo" class="class_one"></div>
Jak mogę dodać klasę class_two
bez wymiany class_one
?
końcowy wynik:
<div id="foo" class="class_one class_two"></div>
przykładu HTML:Dodaj klasę do DIV z javascript
<div id="foo" class="class_one"></div>
Jak mogę dodać klasę class_two
bez wymiany class_one
?
końcowy wynik:
<div id="foo" class="class_one class_two"></div>
Standardowy javascript:
document.getElementById('foo').className += ' class_two'
lub JQuery:
$('#foo').addClass('class_two');
Można użyć jQuery.
$('#YourElement').addClass('YourClass'); //add
$('#YourElement').removeClass('YourClass'); //remove
$('#YourElement').toggleClass('YourClass'); //toggle
lub JavaScript, jeśli chcesz.
document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove
To jest całkiem zadbane, nigdy wcześniej tego nie widziałem, czy klasa jest nowym api?/kompatybilny ze starszymi przeglądarkami? –
Nie sprawdzałem ich we wszystkich przeglądarkach, ale mogą pracować na głównych (najnowszych) przeglądarkach. – Lion
klasaList jest dostępna w większości nowoczesnych przeglądarek monhttp: //caniuse.com/#feat=classlist –
można ułatwić życie z kilkoma funkcjami pomocniczymi:
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')
Sprawdź this dodać klasę:
document.getElementById('foo').classList.add("class_two");
czuję, że to jest lepsze rozwiązanie.
doskonały, dzięki kolega. – jared