Odpowiedzi:
Użyj element.classList.add, aby dodać klasę:
element.classList.add("my-class");I element.classList.remove, aby usunąć klasę:
element.classList.remove("my-class");Dodaj spację oraz nazwę nowej klasy do classNamewłaściwości elementu. Najpierw umieść idelement, aby łatwo uzyskać referencję.
<div id="div1" class="someclass">
<img ... id="image1" name="image1" />
</div>Następnie
var d = document.getElementById("div1");
d.className += " otherclass";Zwróć uwagę na miejsce wcześniej otherclass. Ważne jest, aby uwzględnić spację, w przeciwnym razie zagraża to istniejącym klasom, które znajdują się przed nią na liście klas.
Zobacz także element.className w MDN .
Najłatwiejszym sposobem na to bez żadnych ram jest użycie metody element.classList.add .
var element = document.getElementById("div1");
element.classList.add("otherclass");Edycja: A jeśli chcesz usunąć klasę z elementu -
element.classList.remove("otherclass");Wolę nie dodawać żadnych pustych miejsc i samodzielnie obsługiwać zduplikowanych wpisów (co jest wymagane podczas korzystania z tego document.classNamepodejścia). Istnieją pewne ograniczenia przeglądarki , ale można je obejść za pomocą wielopełniaczy .
znajdź element docelowy „d”, jak chcesz, a następnie:
d.className += ' additionalClass'; //note the spacemożesz owinąć to w sprytniejszy sposób, aby sprawdzić wcześniejsze istnienie i sprawdzić wymagania dotyczące miejsca itp.
splitnazwę klasy w białych znakach, usuń tę, której nie chcesz z wynikowej tablicy, a następnie jointablicę ponownie ... lub użyj element.classList.remove.
Kompatybilność krzyżowa
W poniższym przykładzie dodajemy a classnamedo <body>elementu. Jest to zgodne z IE-8.
var a = document.body;
a.classList ? a.classList.add('classname') : a.className += ' classname';To jest skrót dla następujących ...
var a = document.body;
if (a.classList) {
a.classList.add('wait');
} else {
a.className += ' wait';
}Wydajność
Jeśli bardziej zależy Ci na wydajności niż na kompatybilności krzyżowej, możesz skrócić ją do następujących, czyli o 4% szybciej.
var z = document.body;
document.body.classList.add('wait');Wygoda
Alternatywnie możesz użyć jQuery, ale wynikowa wydajność jest znacznie mniejsza. 94% wolniej według jsPerf
$('body').addClass('wait');Wydajność
Selektywne używanie jQuery jest najlepszą metodą usuwania klasy, jeśli zależy Ci na wydajności
var a = document.body, c = ' classname';
$(a).removeClass(c);Bez jQuery jest o 32% wolniejszy
var a = document.body, c = ' classname';
a.className = a.className.replace( c, '' );
a.className = a.className + c;Element("document.body").ClassNames.add("classname")
Element("document.body").ClassNames.remove("classname")
Element("document.body").ClassNames.set("classname")YAHOO.util.Dom.hasClass(document.body,"classname")
YAHOO.util.Dom.addClass(document.body,"classname")
YAHOO.util.Dom.removeClass(document.body,"classname")a.classList ? ...) będzie miała jakąkolwiek różnicę prędkości w porównaniu do zwykłej ( if (a.classList) { ....)?
classList.remove(). Dlaczego tego nie używałeś? jest znacznie szybszy niż jQuery jsperf.com/remove-class-vanilla-vs-jquery
classListdo wszystkiego oprócz usuwania klas, dlatego o to pytam.
Inne podejście do dodania klasy do elementu za pomocą czystego JavaScript
Aby dodać klasę:
document.getElementById("div1").classList.add("classToBeAdded");Aby usunąć klasę:
document.getElementById("div1").classList.remove("classToBeRemoved");Kiedy praca, którą wykonuję, nie wymaga użycia biblioteki, korzystam z tych dwóch funkcji:
function addClass( classname, element ) {
var cn = element.className;
//test for existance
if( cn.indexOf( classname ) != -1 ) {
return;
}
//add a space if the element already has class
if( cn != '' ) {
classname = ' '+classname;
}
element.className = cn+classname;
}
function removeClass( classname, element ) {
var cn = element.className;
var rxp = new RegExp( "\\s?\\b"+classname+"\\b", "g" );
cn = cn.replace( rxp, '' );
element.className = cn;
}if( cn.indexOf( classname ) != -1 ) { return; } Uwaga: jeśli dodasz klasę „btn”, a klasa „btn-info” już tu jest, to się nie powiedzie.
element.className.split(" ");aby zapobiec zgłoszonemu tutaj problemowi @AlexandreDieulot.
Zakładając, że robisz coś więcej niż tylko dodawanie tej jednej klasy (np. Masz żądania asynchroniczne itd.), Zaleciłbym bibliotekę taką jak Prototype lub jQuery .
Dzięki temu prawie wszystko, co musisz zrobić (w tym to), stanie się bardzo proste.
Powiedzmy, że masz już jQuery na swojej stronie, możesz użyć takiego kodu, aby dodać nazwę klasy do elementu (w tym przypadku podczas ładowania):
$(document).ready( function() {
$('#div1').addClass( 'some_other_class' );
} );Sprawdź przeglądarkę API jQuery, aby zobaczyć inne rzeczy.
Możesz użyć metody classList.add LUB classList.remove, aby dodać / usunąć klasę z elementu.
var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")Powyższy kod doda (i NIE zastąpi) klasę „anyclass” do nameElem. Podobnie możesz użyć metody classList.remove (), aby usunąć klasę.
nameElem.classList.remove("anyclss")Aby dodać klasę do elementu, nie usuwając / nie wpływając na istniejące wartości, dodaj spację i nową nazwę klasy, tak jak poniżej:
document.getElementById("MyElement").className += " MyClass";Aby zastąpić wszystkie istniejące klasy jedną lub większą liczbą nowych klas, ustaw atrybut className:
document.getElementById("MyElement").className = "MyClass";(Możesz użyć listy rozdzielanej spacjami, aby zastosować wiele klas.)
Jeśli nie chcesz używać jQuery i chcesz obsługiwać starsze przeglądarki:
function addClass(elem, clazz) {
if (!elemHasClass(elem, clazz)) {
elem.className += " " + clazz;
}
}
function elemHasClass(elem, clazz) {
return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
}Wiem, że IE9 jest oficjalnie wyłączony i możemy to osiągnąć, element.classListjak wiele powiedziano powyżej, ale po prostu próbowałem dowiedzieć się, jak to działa bez classListpomocy wielu odpowiedzi powyżej, mogłem się tego nauczyć.
Poniższy kod rozszerza wiele powyższych odpowiedzi i poprawia je, unikając dodawania zduplikowanych klas.
function addClass(element,className){
var classArray = className.split(' ');
classArray.forEach(function (className) {
if(!hasClass(element,className)){
element.className += " "+className;
}
});
}
//this will add 5 only once
addClass(document.querySelector('#getbyid'),'3 4 5 5 5');Ja również uważam, że najszybszym sposobem jest użycie Element.prototype.classList jak w es5: document.querySelector(".my.super-class").classList.add('new-class')
ale w ie8 nie ma czegoś takiego jak Element.prototype.classList, w każdym razie można go wypełnić za pomocą tego fragmentu (można go swobodnie edytować i ulepszać ):
if(Element.prototype.classList === void 0){
function DOMTokenList(classes, self){
typeof classes == "string" && (classes = classes.split(' '))
while(this.length){
Array.prototype.pop.apply(this);
}
Array.prototype.push.apply(this, classes);
this.__self__ = this.__self__ || self
}
DOMTokenList.prototype.item = function (index){
return this[index];
}
DOMTokenList.prototype.contains = function (myClass){
for(var i = this.length - 1; i >= 0 ; i--){
if(this[i] === myClass){
return true;
}
}
return false
}
DOMTokenList.prototype.add = function (newClass){
if(this.contains(newClass)){
return;
}
this.__self__.className += (this.__self__.className?" ":"")+newClass;
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.remove = function (oldClass){
if(!this.contains(newClass)){
return;
}
this[this.indexOf(oldClass)] = undefined
this.__self__.className = this.join(' ').replace(/ +/, ' ')
DOMTokenList.call(this, this.__self__.className)
}
DOMTokenList.prototype.toggle = function (aClass){
this[this.contains(aClass)? 'remove' : 'add'](aClass)
return this.contains(aClass);
}
DOMTokenList.prototype.replace = function (oldClass, newClass){
this.contains(oldClass) && this.remove(oldClass) && this.add(newClass)
}
Object.defineProperty(Element.prototype, 'classList', {
get: function() {
return new DOMTokenList( this.className, this );
},
enumerable: false
})
}Aby rozwinąć to, co powiedzieli inni, wiele klas CSS jest połączonych w jednym ciągu, oddzielonych spacjami. Tak więc, jeśli chcesz go na stałe zakodować, wyglądałoby to tak:
<div class="someClass otherClass yetAnotherClass">
<img ... id="image1" name="image1" />
</div>Stamtąd możesz łatwo uzyskać javascript niezbędny do dodania nowej klasy ... po prostu dodaj spację, a następnie nową klasę do właściwości className elementu. Wiedząc o tym, możesz również napisać funkcję, aby usunąć klasę później, jeśli zajdzie taka potrzeba.
Aby w prosty sposób dodawać, usuwać lub sprawdzać klasy elementów:
var uclass = {
exists: function(elem,className){var p = new RegExp('(^| )'+className+'( |$)');return (elem.className && elem.className.match(p));},
add: function(elem,className){if(uclass.exists(elem,className)){return true;}elem.className += ' '+className;},
remove: function(elem,className){var c = elem.className;var p = new RegExp('(^| )'+className+'( |$)');c = c.replace(p,' ').replace(/ /g,' ');elem.className = c;}
};
var elem = document.getElementById('someElem');
//Add a class, only if not exists yet.
uclass.add(elem,'someClass');
//Remove class
uclass.remove(elem,'someClass');Możesz zastosować nowoczesne podejście podobne do jQuery
Jeśli chcesz zmienić tylko jeden element, pierwszy, który JS znajdzie w DOM, możesz użyć tego:
document.querySelector('.someclass').className += " red";.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" only to first element in DOM</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Pamiętaj, aby zostawić jedno miejsce przed nazwą klasy.
Jeśli masz wiele klas, w których chcesz dodać nową klasę, możesz jej użyć w ten sposób
document.querySelectorAll('.someclass').forEach(function(element) {
element.className += " red";
});.red {
color: red;
}<div class="someclass">
<p>This method will add class "red" to all elements in DOM that have "someclass" class.</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>
<div class="someclass">
<p>lorem ipsum</p>
</div>Myślę, że lepiej jest używać czystego JavaScript, który możemy uruchomić na DOM przeglądarki.
Oto funkcjonalny sposób jego użycia. Użyłem ES6, ale możesz swobodnie korzystać z ES5 i wyrażenia funkcji lub definicji funkcji, w zależności od tego, który kod JavaScript jest odpowiedni.
'use strict'
const oldAdd = (element, className) => {
let classes = element.className.split(' ')
if (classes.indexOf(className) < 0) {
classes.push(className)
}
element.className = classes.join(' ')
}
const oldRemove = (element, className) => {
let classes = element.className.split(' ')
const idx = classes.indexOf(className)
if (idx > -1) {
classes.splice(idx, 1)
}
element.className = classes.join(' ')
}
const addClass = (element, className) => {
if (element.classList) {
element.classList.add(className)
} else {
oldAdd(element, className)
}
}
const removeClass = (element, className) => {
if (element.classList) {
element.classList.remove(className)
} else {
oldRemove(element, className)
}
}Próbka z czystym JS. W pierwszym przykładzie otrzymujemy identyfikator naszego elementu i dodajemy np. 2 klasy.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsById('tabGroup').className = "anyClass1 anyClass2";
})W drugim przykładzie otrzymujemy nazwę klasy elementu i dodajemy jeszcze 1.
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByClassName('tabGroup')[0].className = "tabGroup ready";
})Dla tych, którzy używają Lodash i chcą zaktualizować classNameciąg:
// get element reference
var elem = document.getElementById('myElement');
// add some classes. Eg. 'nav' and 'nav header'
elem.className = _.chain(elem.className).split(/[\s]+/).union(['nav','navHeader']).join(' ').value()
// remove the added classes
elem.className = _.chain(elem.className).split(/[\s]+/).difference(['nav','navHeader']).join(' ').value()po pierwsze, daj div identyfikator. Następnie wywołaj funkcję appendClass:
<script language="javascript">
function appendClass(elementId, classToAppend){
var oldClass = document.getElementById(elementId).getAttribute("class");
if (oldClass.indexOf(classToAdd) == -1)
{
document.getElementById(elementId).setAttribute("class", classToAppend);
}
}
</script>indexOfjest naiwnym rozwiązaniem i ma już wskazany problem .
Za pomocą interfejsu API querySelector można wybrać element, a następnie utworzyć funkcję z elementem i nową nazwą klasy jako parametrami. Korzystanie z listy klas w nowoczesnych przeglądarkach, w innym przypadku w IE8. Następnie możesz wywołać funkcję po zdarzeniu.
//select the dom element
var addClassVar = document.querySelector('.someclass');
//define the addclass function
var addClass = function(el,className){
if (el.classList){
el.classList.add(className);
}
else {
el.className += ' ' + className;
}
};
//call the function
addClass(addClassVar, 'newClass');document.getElementById('some_id').className+=' someclassname'LUB:
document.getElementById('come_id').classList.add('someclassname')Pierwsze podejście pomogło w dodaniu klasy, gdy drugie podejście nie zadziałało.
Nie zapomnij zachować miejsca przed' someclassname' pierwszym podejściem.
Do usunięcia możesz użyć:
document.getElementById('some_id').classList.remove('someclassname')Ten kod js działa dla mnie
zapewnia zastąpienie nazwy klasy
var DDCdiv = hEle.getElementBy.....
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta[i] = 'hidden';
break;// quit for loop
}
else if (Ta[i] == 'hidden'){
Ta[i] = 'visible';
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameAby dodać wystarczy użyć
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
Ta.push('New class name');
// Ta.push('Another class name');//etc...
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameAby usunąć użycie
var cssCNs = DDCdiv.getAttribute('class');
var Ta = cssCNs.split(' '); //split into an array
for (var i=0; i< Ta.length;i++)
{
if (Ta[i] == 'visible'){
Ta.splice( i, 1 );
break;// quit for loop
}
}
DDCdiv.setAttribute('class',Ta.join(' ') ); // Join array with space and set class nameMam nadzieję, że to jest pomocne do sombody
element.classList.add("my-class")zamiast tego.