Atrybut className obiektu DOM HTML

Definicja i użycie

className Ustawienie lub zwrócenie atrybutu class elementu.

Inne zasoby:

Atrybut classList elementu

Metoda getElementsByClassName() dokumentu

Obiekt Style HTML DOM

Przykład

Przykład 1

Ustaw atrybut class elementu:

element.className = "myStyle";

spróbuj sam

Przykład 2

Uzyskaj atrybut class "myDIV":

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

spróbuj sam

Przykład 3

Przełącz między dwoma nazwami klas:

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

spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Gramatyka

Zwróć atrybut className:

HTMLElementObject.className

Ustawienie atrybutu className:

HTMLElementObject.className = class

Wartość atrybutu

Wartość opis
class

nazwa klasy elementu.

rozdziel wiele klas spacjami, np. "test demo".

zwrócona wartość

typ opis
string klasa elementu, lub lista klas rozdzielonych spacjami.

więcej przykładów

przykład 4

pobierz klasę elementu <div> (jeśli istnieje):

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

spróbuj sam

przykład 5

pobierz atrybut class z elementu o wielu klasach:

<div id="myDIV" class="myStyle test example">
<p>Jestem myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

spróbuj sam

przykład 6

zastąp istniejącą klasę nową klasą atrybutu class:

element.className = "newClassName";

spróbuj sam

przykład 7

aby dodać nową klasę bez zastępowania istniejącej wartości, dodaj spację i nową klasę:

element.className += " class1 class2";

spróbuj sam

przykład 8

jeśli "myDIV" ma klasę "myStyle", zmień rozmiar czcionki:

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

spróbuj sam

przykład 9

jeśli przewiniesz stronę o 50 pikseli od góry, zostanie dodana klasa "test":

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

spróbuj sam

obsługa przeglądarek

wszystkie przeglądarki wspierają element.className:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
obsługa obsługa obsługa obsługa obsługa obsługa

powiązane strony

Tutorial CSS:Gramatyka CSS

Podręcznik CSS:Wybieracz .class CSS