Atribut třídy HTML
Atribut HTML classse používá k určení třídy pro prvek HTML.
Více prvků HTML může sdílet stejnou třídu.
Použití atributu třídy
Atribut classse často používá k označení názvu třídy v šabloně stylů. Může být také použit JavaScriptem pro přístup a manipulaci s prvky s konkrétním názvem třídy.
V následujícím příkladu máme tři <div>prvky s classatributem s hodnotou "city". Všechny tři <div>
prvky budou mít stejný styl podle .city
definice stylu v hlavičce:
Příklad
<!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>
V následujícím příkladu máme dva <span>prvky s classatributem s hodnotou "note". Oba <span>
prvky budou mít stejný styl podle .note
definice stylu v hlavičce:
Příklad
<!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>
Tip: Atribut classlze použít na jakýkoli prvek HTML.
Poznámka: V názvu třídy se rozlišují velká a malá písmena!
Tip: Mnohem více o CSS se můžete dozvědět v našem CSS Tutorial .
Syntaxe třídy
Chcete-li vytvořit třídu; napište tečku (.) následovanou názvem třídy. Poté definujte vlastnosti CSS ve složených závorkách {}:
Příklad
Vytvořte třídu s názvem „město“:
<!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>
Více tříd
Elementy HTML mohou patřit do více než jedné třídy.
Chcete-li definovat více tříd, oddělte názvy tříd mezerou, např. <div class="city main">. Prvek bude stylizován podle všech zadaných tříd.
V následujícím příkladu první <h2>prvek patří do
citytřídy i do maintřídy a získá styly CSS z obou tříd:
Příklad
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
Různé prvky mohou sdílet stejnou třídu
Různé prvky HTML mohou ukazovat na stejný název třídy.
V následujícím příkladu oba <h2>a <p>
ukazují na třídu „město“ a budou sdílet stejný styl:
Příklad
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
Použití atributu třídy v JavaScriptu
Název třídy může JavaScript také použít k provedení určitých úkolů pro konkrétní prvky.
JavaScript může přistupovat k prvkům s konkrétním názvem třídy pomocí getElementsByClassName()metody:
Příklad
Kliknutím na tlačítko skryjete všechny prvky s názvem třídy „město“:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
Nedělejte si starosti, pokud nerozumíte kódu ve výše uvedeném příkladu.
Více o JavaScriptu se dozvíte v naší kapitole HTML JavaScript nebo si můžete prostudovat náš JavaScript Tutorial .
Shrnutí kapitoly
- Atribut HTML
classurčuje jeden nebo více názvů třídy pro prvek - Třídy používají CSS a JavaScript k výběru a přístupu ke konkrétním prvkům
- Atribut
classlze použít na jakýkoli prvek HTML - V názvu třídy se rozlišují velká a malá písmena
- Různé prvky HTML mohou ukazovat na stejný název třídy
getElementsByClassName()JavaScript může pomocí metody přistupovat k prvkům s konkrétním názvem třídy