Atrybut class HTML

Definicja i użycie

class Atrybut określa nazwę klasy elementu (classname).

class Atrybut głównie jest używany do wskazywania klas w arkuszu stylów. Jednak może również być używany do zmiany elementów HTML o określonej klasie za pomocą JavaScript (HTML DOM).

Zobacz również:

Kurs HTML:Atrybuty HTML

Kurs CSS:Gramatyka CSS

Podręcznik CSS:Selektor .class CSS

Podręcznik HTML DOM:Metoda getElementsByClassName() HTML DOM

Podręcznik HTML DOM:Atrybut className HTML DOM

Podręcznik HTML DOM:Atrybut classList HTML DOM

Podręcznik HTML DOM:Obiekt Style DOM HTML

Przykład

Przykład 1

Używaj atrybutu class w dokumencie HTML:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Nagłówek 1</h1>
<p>Paragraf.</p>
<p class="important">Proszę zauważyć, że to jest ważny paragraf.:)</p>
</body>
</html>

Spróbuj sam

Poniżej znajdują się więcej przykładów.

Gramatyka

<element class="classname">

Wartość atrybutu

Wartość Opis
classname

Przypisz jedną lub kilka klas do elementu.

Jeśli chcesz wskazać wiele klas, oddziel je spacjami.

Pozwala to na połączenie wielu klas CSS dla jednego elementu HTML.

Na przykład: <span class="left important">

Zasady nazewnictwa:

  • Musi zaczynać się od litery A-Z lub a-z
  • Można dodać: litery (A-Za-z), cyfry (0-9), myślnik ("-") i podkreślnik ("_")

Więcej przykładów

Przykład 2

Dodaj wiele klas do elementu HTML:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">Tytuł 1</h1>
<p>Paragraf.</p>
</body>
</html>

Spróbuj sam

Przykład 3

Dodaj żółty kolor tła do pierwszego elementu o klasie "example" (indeks 0) za pomocą JavaScript.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

Spróbuj sam

Przykład 4

Dodaj klasę "mystyle" do elementu o id "myDIV" za pomocą JavaScript:

document.getElementById("myDIV").classList.add("mystyle");

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie