Wie kann man einem bestimmten Element eine Klasse hinzufügen?

Question

Ich habe ein Element, das bereits eine Klasse hat:

<div class="someclass">
    <img ... id="image1" name="image1" />
</div>

Nun möchte ich eine JavaScript-Funktion erstellen, die eine Klasse zu der div (nicht ersetzen, sondern hinzufügen).

Wie kann ich das tun?

Answer 1

Ein anderer Ansatz, die Klasse einem Element mit reinem JavaScript hinzuzufügen

Zum Hinzufügen von Klasse:

document.getElementById("div1").classList.add("classToBeAdded");

Zum Entfernen der Klasse:

document.getElementById("div1").classList.remove("classToBeRemoved");

Answer 2

document.getElementById('some_id').className+='  someclassname'

OR:

document.getElementById('some_id').classList.add('someclassname')

Der erste Ansatz half beim Hinzufügen der Klasse, während der zweite Ansatz nicht funktionierte.
Vergessen Sie nicht, eine Lücke vor dem ' someclassname' im ersten Ansatz.

Zum Entfernen können Sie verwenden:

document.getElementById('some_id').classList.remove('someclassname')

Answer 3

Wenn meine Arbeit die Verwendung einer Bibliothek nicht rechtfertigt, verwende ich diese beiden Funktionen:

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;
}

Answer 4

Angenommen, Sie tun mehr als nur das Hinzufügen dieser einen Klasse (z. B. haben Sie asynchrone Anforderungen und so weiter gehen auch), würde ich empfehlen eine Bibliothek wie Prototyp o jQuery .

Dadurch wird so ziemlich alles, was Sie tun müssen (einschließlich dieses Vorgangs), sehr einfach.

Angenommen, Sie haben jetzt jQuery auf Ihrer Seite, dann könnten Sie einen Code wie diesen verwenden, um einem Element (in diesem Fall beim Laden) einen Klassennamen hinzuzufügen:

$(document).ready( function() {
  $('#div1').addClass( 'some_other_class' );
} );

Überprüfen Sie die jQuery-API-Browser für andere Dinge.

Answer 5

Sie können die Methode classList.add ODER classList.remove verwenden, um eine Klasse zu einem Element hinzuzufügen bzw. daraus zu entfernen.

var nameElem = document.getElementById("name")
nameElem.classList.add("anyclss")

Der obige Code fügt (und ersetzt NICHT) eine Klasse "anyclass" zu nameElem hinzu. In ähnlicher Weise können Sie die Methode classList.remove() verwenden, um eine Klasse zu entfernen.

nameElem.classList.remove("anyclss")