Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM className Propery

<Element Przedmiot

Przykład

Ustaw klasę dla <div> elementu o id = „myDiv”:

document.getElementById("myDIV").className = "mystyle";
Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Zestawy własności className lub zwraca nazwę klasy elementu (wartość atrybutu elementu w klasie).

Wskazówka: Podobny nieruchomość do className jest classList nieruchomość.

Wsparcie przeglądarka

Nieruchomość
className tak tak tak tak tak

Składnia

Powrót własność className:

HTMLElementObject .className

Ustaw właściwość className:

HTMLElementObject .className= class

wartości nieruchomości

Wartość Opis
class Określa nazwę klasy elementu. Aby zastosować wiele klas, rozdzielając je spacjami, jak "test demo"

Szczegóły techniczne

Zwracana wartość: Ciąg reprezentujący klasę lub rozdzieloną spacjami listę zajęć, elementu
Przykłady

Więcej przykładów

Przykład

Uzyskać nazwę klasy pierwszej <div> elementu w dokumencie (if any) :

var x = document.getElementsByTagName("DIV")[0].className;

Wynikiem X będzie:

mystyle
Spróbuj sam "

Przykład

Inne przykłady, w jaki sposób uzyskać nazwę klasy elementu:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Spróbuj sam "

Przykład

Get nazwy klas z elementu z wielu klas:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

var x = document.getElementById("myDIV").className;

Wynikiem X będzie:

mystyle text example
Spróbuj sam "

Przykład

Zastąpieniem istniejącego nazwę klasy na nowy:

<div id="myDIV" class="mystyle">I am a DIV element</div>

document.getElementById("myDIV").className = "newClassName";
Spróbuj sam "

Przykład

Aby dodać klasę do elementu, bez nadpisywania istniejących wartości, wstawić spację i nową nazwę klasy:

document.getElementById("myDIV").className += " anotherClass";
Spróbuj sam "

Przykład

Jeśli nie ma klasę "mystyle" w elemencie z id = „myDiv”, zmienić jego rozmiar czcionki:

var x = document.getElementById("myDIV");

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Spróbuj sam "

Przykład

Przełączanie między nazwami klas na różnych stanowiskach spiralnych - gdy użytkownik przesuwa w dół 50 pikseli z góry, nazwa klasy "test" zostaną dodane do elementu (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Spróbuj sam "

Podobne strony

CSS: CSS selektory

CSS: CSS Selector .class

HTML DOM: HTML DOM classList Property

HTML DOM: HTML DOM getElementsByClassName() Metoda

HTML DOM: HTML DOM Style obiektu

<Element Przedmiot