Atrybut klasy HTML
Atrybut HTML class
służy do określenia klasy elementu HTML.
Wiele elementów HTML może dzielić tę samą klasę.
Korzystanie z atrybutu klasy
Atrybut jest class
często używany do wskazania nazwy klasy w arkuszu stylów. Może być również używany przez JavaScript do uzyskiwania dostępu do elementów o określonej nazwie klasy i manipulowania nimi.
W poniższym przykładzie mamy trzy <div>
elementy z class
atrybutem o wartości „miasto”. Wszystkie trzy <div>
elementy będą miały jednakowy styl zgodnie z .city
definicją stylu w sekcji head:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
W poniższym przykładzie mamy dwa <span>
elementy z class
atrybutem o wartości „notatka”. Oba <span>
elementy będą miały jednakowy styl zgodnie z .note
definicją stylu w sekcji nagłówka:
Przykład
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Wskazówka: Atrybutu class
można użyć w dowolnym elemencie HTML.
Uwaga: w nazwie klasy rozróżniana jest wielkość liter!
Wskazówka: Więcej informacji o CSS znajdziesz w naszym samouczku CSS .
Składnia dla klasy
Aby stworzyć klasę; wpisz kropkę (.), a następnie nazwę klasy. Następnie zdefiniuj właściwości CSS w nawiasach klamrowych {}:
Przykład
Utwórz klasę o nazwie „miasto”:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Wiele klas
Elementy HTML mogą należeć do więcej niż jednej klasy.
Aby zdefiniować wiele klas, oddziel nazwy klas spacją, np. <div class="city main">. Styl elementu będzie zgodny ze wszystkimi określonymi klasami.
W poniższym przykładzie pierwszy <h2>
element należy zarówno do
city
klasy, jak i do main
klasy, i otrzyma style CSS z obu klas:
Przykład
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Różne elementy mogą dzielić tę samą klasę
Różne elementy HTML mogą wskazywać na tę samą nazwę klasy.
W poniższym przykładzie zarówno <h2>
i <p>
wskazuje na klasę „city” i będą miały ten sam styl:
Przykład
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Użycie atrybutu klasy w JavaScript
Nazwa klasy może być również używana przez JavaScript do wykonywania określonych zadań dla określonych elementów.
JavaScript może uzyskać dostęp do elementów o określonej nazwie klasy za pomocą getElementsByClassName()
metody:
Przykład
Kliknij przycisk, aby ukryć wszystkie elementy o nazwie klasy „miasto”:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Nie martw się, jeśli nie rozumiesz kodu z powyższego przykładu.
Dowiesz się więcej o JavaScript w naszym rozdziale HTML JavaScript lub możesz przestudiować nasz samouczek JavaScript .
Podsumowanie rozdziału
- Atrybut HTML
class
określa jedną lub więcej nazw klas dla elementu - Klasy są używane przez CSS i JavaScript do wybierania i uzyskiwania dostępu do określonych elementów
- Atrybut może być użyty w
class
dowolnym elemencie HTML - W nazwie klasy rozróżniana jest wielkość liter
- Różne elementy HTML mogą wskazywać na tę samą nazwę klasy
- JavaScript może uzyskać dostęp do elementów o określonej nazwie klasy za pomocą
getElementsByClassName()
metody