HTML id atribut
Atribut HTML idse používá k určení jedinečného ID prvku HTML.
V dokumentu HTML nemůžete mít více než jeden prvek se stejným ID.
Použití atributu id
Atribut idurčuje jedinečné ID prvku HTML. Hodnota id
atributu musí být v dokumentu HTML jedinečná.
Atribut idse používá k ukázání na konkrétní deklaraci stylu v šabloně stylů. Je také používán JavaScriptem pro přístup a manipulaci s prvkem s konkrétním ID.
Syntaxe pro id je: napište znak hash (#) následovaný jménem id. Poté definujte vlastnosti CSS ve složených závorkách {}.
V následujícím příkladu máme <h1>prvek, který ukazuje na id název "myHeader". Tento <h1>
prvek bude stylizován podle #myHeader
definice stylu v sekci head:
Příklad
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
Poznámka: V názvu ID se rozlišují velká a malá písmena!
Poznámka: Jméno ID musí obsahovat alespoň jeden znak, nesmí začínat číslem a nesmí obsahovat mezery (mezery, tabulátory atd.).
Rozdíl mezi třídou a ID
Název třídy může používat více prvků HTML, zatímco název id musí používat pouze jeden prvek HTML na stránce:
Příklad
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<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>
Tip: Mnohem více o CSS se můžete dozvědět v našem CSS Tutorial .
HTML záložky s ID a odkazy
HTML záložky se používají k tomu, aby čtenáři mohli přejít na konkrétní části webové stránky.
Záložky mohou být užitečné, pokud je vaše stránka velmi dlouhá.
Chcete-li použít záložku, musíte ji nejprve vytvořit a poté na ni přidat odkaz.
Po kliknutí na odkaz se stránka posune na místo se záložkou.
Příklad
Nejprve vytvořte záložku s idatributem:
<h2 id="C4">Chapter 4</h2>
Poté přidejte odkaz na záložku („Přejít na kapitolu 4“) ze stejné stránky:
Příklad
<a href="#C4">Jump to Chapter 4</a>
Nebo přidejte odkaz na záložku („Přejít na kapitolu 4“) z jiné stránky:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Použití atributu id v JavaScriptu
Atribut idmůže být také použit JavaScriptem k provedení některých úkolů pro tento konkrétní prvek.
JavaScript může přistupovat k prvku se specifickým ID pomocí getElementById()metody:
Příklad
idK manipulaci s textem pomocí JavaScriptu použijte atribut:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Tip: Prostudujte si JavaScript v kapitole HTML JavaScript nebo v našem JavaScript Tutorial .
Shrnutí kapitoly
- Atribut
idse používá k určení jedinečného ID prvku HTML - Hodnota
idatributu musí být v dokumentu HTML jedinečná - Atribut
idpoužívá CSS a JavaScript ke stylování/výběru konkrétního prvku - Hodnota
idatributu rozlišuje malá a velká písmena - Atribut
idse také používá k vytváření záložek HTML getElementById()JavaScript může pomocí metody přistupovat k prvku se specifickým ID