Πώς μπορώ να προσθέσω μια κλάση σε ένα δεδομένο στοιχείο;

Έχω ένα στοιχείο που έχει ήδη μια κλάση:

<div class="someclass"&gt,
    <img ... id="image1" name="image1" /&gt,
</div&gt,

Τώρα θέλω να δημιουργήσω μια συνάρτηση JavaScript που θα προσθέσει μια κλάση στο div (όχι αντικατάσταση, αλλά προσθήκη).

Πώς μπορώ να το κάνω αυτό;

Edwin Pratt
Επεξεργασμένη ερώτηση Κάνε Μάιος 2019 в 10:31
Προγραμματισμός
javascript dom-manipulation
Κάνε Φεβρουάριος 2009 в 1:54
23 προβολές
Λύση

Προσθέστε ένα κενό συν το όνομα της νέας σας κλάσης στην ιδιότητα className του στοιχείου. Πρώτα, βάλτε ένα id στο στοιχείο ώστε να μπορείτε εύκολα να πάρετε μια αναφορά.

<div id="div1" class="someclass">

</div>

Στη συνέχεια,

var d = document.getElementById("div1");
d.className += " otherclass";

Προσέξτε το κενό πριν από το otherclass. Είναι σημαντικό να συμπεριλάβετε το κενό αλλιώς θέτει σε κίνδυνο τις υπάρχουσες κλάσεις που προηγούνται στη λίστα κλάσεων.

Βλέπε επίσης element.className στο MDN.

Sean Ker
Επεξεργασμένη απάντηση Κάνε Οκτώβριος 2019 в 9:27
Σχόλια (14)

βρείτε το στοιχείο-στόχο σας "d" όπως επιθυμείτε και στη συνέχεια:

d.className += ' additionalClass'; //note the space

μπορείτε να το τυλίξετε με πιο έξυπνους τρόπους για να ελέγξετε την προ-ύπαρξη, και να ελέγξετε για απαιτήσεις χώρου κ.λπ.

Cœur
Επεξεργασμένη απάντηση Κάνε Φεβρουάριος 2017 в 4:29
Σχόλια (4)

Υποθέτοντας ότι κάνετε περισσότερα από την απλή προσθήκη αυτής της κλάσης (π.χ., έχετε ασύγχρονες αιτήσεις και ούτω καθεξής), θα συνιστούσα μια βιβλιοθήκη όπως η Prototype ή η jQuery.

Αυτό θα κάνει σχεδόν όλα όσα θα χρειαστεί να κάνετε (συμπεριλαμβανομένου αυτού) πολύ απλά.

Έτσι, ας πούμε ότι έχετε το jQuery στη σελίδα σας τώρα, θα μπορούσατε να χρησιμοποιήσετε κώδικα όπως αυτός για να προσθέσετε ένα όνομα κλάσης σε ένα στοιχείο (κατά τη φόρτωση, σε αυτή την περίπτωση):

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

Ελέγξτε το jQuery API browser για άλλα πράγματα.

Σχόλια (0)