Ιδιότητα className του HTML DOM Element

Ορισμός και χρήση

className Ρύθμιση ή επιστροφή της ιδιότητας class του στοιχείου.

Δείτε επίσης:

Ιδιότητα classList του Element

Μέθοδος getElementsByClassName() του Document

Όντοτητα Style HTML DOM

Παράδειγμα

Παράδειγμα 1

Ρύθμιση της ιδιότητας class του στοιχείου:

element.className = "myStyle";

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Αποκτήστε την ιδιότητα class του "myDIV":

let value = document.getElementById("myDIV").className;

Δοκιμάστε το προσωπικά

Παράδειγμα 3

Μεταβίβαση μεταξύ δύο ονομάτων κλάσης:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

Δοκιμάστε το προσωπικά

Συμβουλή:Περισσότερες παραδείγματα παρέχονται στο κάτω μέρος της σελίδας.

Γλώσσα

Επιστροφή της ιδιότητας className:

HTMLElementObject.className

Ρύθμιση της ιδιότητας className:

HTMLElementObject.className = class

τίμηση

τιμή Περιγραφή
class

Το όνομα της κλάσης του στοιχείου

Διαχωρίστε πολλαπλές κλάσεις με κενά, όπως "test demo".

Αποτελεσματική τιμή

Τύπος Περιγραφή
Συμβόλαιο Η κλάση του στοιχείου, ή λίστα κλάσεων που διαχωρίζονται με κενά, όπως "test demo".

Περισσότερα παραδείγματα

Παράδειγμα 4

Αποκτήστε την κλάση του πρώτου <div> στοιχείου (αν υπάρχει)

let value = document.getElementsByTagName("div")[0].className;

Δοκιμάστε το προσωπικά

Παράδειγμα 5

Αποκτήστε την κλάση με πολλαπλές κλάσεις

<div id="myDIV" class="myStyle test example">
<p>Είμαι το myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

Δοκιμάστε το προσωπικά

Παράδειγμα 6

Καταργήστε την υπάρχουσα κλάση με τη νέα κλάση του atribου class

element.className = "newClassName";

Δοκιμάστε το προσωπικά

Παράδειγμα 7

Για να προσθέσετε νέες κλάσεις χωρίς να αντικαταστήσετε τις υπάρχουσες τιμές, προσθέστε κενά και τις νέες κλάσεις:

element.className += " class1 class2";

Δοκιμάστε το προσωπικά

Παράδειγμα 8

Αν ο "myDIV" έχει την κλάση "myStyle", τότε αλλάξτε το μέγεθος του γραμματοσειράς:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

Δοκιμάστε το προσωπικά

Παράδειγμα 9

Αν κουρσάρειτε 50 εικονοστοιχεία από την κορυφή της σελίδας, θα προσθέσετε την κλάση "test":

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Δοκιμάστε το προσωπικά

Υποστήριξη περιηγητή

Όλοι οι περιηγητές υποστηρίζουν element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη

Σελίδες συναφείς

Εκμάθηση CSS:Γλώσσα CSS

Εγχειρίδιο CSS:Επιλογέας .class του CSS