Vraag Verander de klasse van een element met JavaScript


Hoe kan ik een klasse van een HTML-element wijzigen in reactie op een onClick evenement met behulp van JavaScript?


2286
2017-10-12 20:06


oorsprong


antwoorden:


Moderne HTML5-technieken voor het wijzigen van klassen

Moderne browsers hebben toegevoegd classlist welke methoden biedt om het gemakkelijker te maken om klassen te manipuleren zonder een bibliotheek nodig te hebben:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Helaas werken deze niet in Internet Explorer vóór v10, hoewel er een is shim om ondersteuning voor het toe te voegen aan IE8 en IE9, beschikbaar via deze pagina. Het wordt echter steeds meer ondersteunde.

Eenvoudige oplossing voor meerdere browsers

De standaard JavaScript-manier om een ​​element te selecteren, gebruikt document.getElementById("Id"), dat is wat de volgende voorbeelden gebruiken - je kunt natuurlijk elementen op andere manieren verkrijgen en in de juiste situatie gewoon gebruiken this in plaats daarvan is het echter buiten het bestek van het antwoord om hier uitvoerig op in te gaan.

Om alle klassen voor een element te wijzigen:

Als u alle bestaande klassen wilt vervangen door een of meer nieuwe klassen, stelt u het kenmerk className in:

document.getElementById("MyElement").className = "MyClass";

(U kunt een door spaties gescheiden lijst gebruiken om meerdere klassen toe te passen.)

Om een ​​extra klasse toe te voegen aan een element:

Als u een klasse aan een element wilt toevoegen zonder bestaande waarden te verwijderen / beïnvloeden, voegt u een spatie en de nieuwe klassenaam toe, zoals:

document.getElementById("MyElement").className += " MyClass";

Om een ​​klasse uit een element te verwijderen:

Om een ​​enkele klasse te verwijderen van een element, zonder andere potentiële klassen te beïnvloeden, is een eenvoudige regex-vervanging vereist:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Een uitleg van deze regex is als volgt:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

De g markeert de vervanger om te herhalen zoals vereist, voor het geval de klassenaam meerdere keren is toegevoegd.

Controleren of een klasse al op een element is toegepast:

Dezelfde regex die hierboven wordt gebruikt voor het verwijderen van een klasse, kan ook worden gebruikt om te controleren of een bepaalde klasse bestaat:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Deze acties toewijzen aan onclick-evenementen:

Hoewel het mogelijk is om JavaScript direct in de HTML-evenementkenmerken te schrijven (zoals onclick="this.className+=' MyClass'") dit is geen aanbevolen gedrag. Vooral bij grotere applicaties wordt meer onderhoudbare code bereikt door HTML-markup te scheiden van JavaScript-interactielogica.

De eerste stap om dit te bereiken, is door een functie te maken en de functie in het onclick-attribuut aan te roepen, bijvoorbeeld:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Het is niet vereist om deze code in scripttags te hebben, dit is eenvoudig voor de beknoptheid van bijvoorbeeld, en het kan geschikter zijn om het JavaScript in een apart bestand op te nemen.)

De tweede stap bestaat uit het verplaatsen van de onclick-gebeurtenis uit de HTML en naar JavaScript, bijvoorbeeld met addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Merk op dat het window.onload-gedeelte vereist is, zodat de inhoud van die functie wordt uitgevoerd na de HTML is klaar met laden - zonder deze code bestaat de MyElement mogelijk niet wanneer de JavaScript-code wordt aangeroepen, dus die regel zou mislukken.)


JavaScript-kaders en bibliotheken

De bovenstaande code zit allemaal in standaard JavaScript, maar het is gebruikelijk om een ​​framework of een bibliotheek te gebruiken om algemene taken te vereenvoudigen, en om te profiteren van bugs en randcasussen waar u misschien niet aan denkt bij het schrijven van uw code.

Hoewel sommige mensen het overdreven vinden om een ​​~ 50 KB-framework toe te voegen om eenvoudigweg een klasse te veranderen, als je een aanzienlijke hoeveelheid JavaScript-werk doet, of iets dat ongewoon gedrag in verschillende browsers kan hebben, is het de moeite waard om te overwegen.

(Zeer grof gezegd, een bibliotheek is een verzameling hulpmiddelen die is ontworpen voor een specifieke taak, terwijl een raamwerk over het algemeen meerdere bibliotheken bevat en een volledige reeks taken vervult.)

De bovenstaande voorbeelden zijn hieronder weergegeven met behulp van jQuery, waarschijnlijk de meest gebruikte JavaScript-bibliotheek (hoewel er ook andere de moeite van het onderzoeken waard zijn).

(Let daar op $ hier is het jQuery-object.)

Klassen wijzigen met jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Bovendien biedt jQuery een snelkoppeling voor het toevoegen van een klasse als deze niet van toepassing is of het verwijderen van een klasse die:

$('#MyElement').toggleClass('MyClass');


Een functie toewijzen aan een klikgebeurtenis met jQuery:

$('#MyElement').click(changeClass);

of, zonder een ID nodig te hebben:

$(':button:contains(My Button)').click(changeClass);



3293
2017-10-12 20:45



Je zou ook gewoon kunnen doen:

document.getElementById ( 'id') classList.add ( 'klasse').;
document.getElementById ( 'id') classList.remove ( 'klasse').;

En om een ​​klasse in te schakelen (verwijder indien aanwezig anders voeg het toe):

. Document.getElementById ( 'id') classList.toggle ( 'klasse');

380
2017-08-05 17:44



In een van mijn oude projecten die geen gebruik maakten van jQuery, bouwde ik de volgende functies voor het toevoegen, verwijderen en controleren of element klasse heeft:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Dus als ik bijvoorbeeld een klik wil toevoegen om wat klasse toe te voegen, kan ik de volgende knop gebruiken:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Inmiddels zou het zeker beter zijn om jQuery te gebruiken.


98
2018-05-28 07:32



Je kunt gebruiken node.className zoals zo:

document.getElementById('foo').className = 'bar';

Dit zou volgens IE5.5 en hoger moeten werken PPK.


64
2017-10-12 20:33



Wauw, verbaasd dat er hier zoveel overkill antwoorden zijn ...

<div class="firstClass" onclick="this.className='secondClass'">

46
2018-01-05 19:14



Pure JavaScript-code gebruiken:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

40
2017-09-20 15:26



Dit werkt voor mij:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

27
2017-12-08 09:36



Ook zou je het HTMLElement-object kunnen uitbreiden, om methoden toe te voegen om klassen toe te voegen, te verwijderen, te schakelen en te controleren (kern):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

En gebruik dan gewoon als volgt (bij klikken wordt de klasse toegevoegd of verwijderd):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Hier is demonstratie.


16
2018-04-11 10:13



Gewoon om informatie toe te voegen uit een ander populair raamwerk, Google Closures, zie hun dom / classes klasse:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Een optie voor het selecteren van het element is het gebruik van goog.dom.query met een CSS3-selector:

var myElement = goog.dom.query("#MyElement")[0];

15
2017-11-26 21:04