HTML adribut id se používá k unikátnímu označení určitého prvku dokumentu.
Každé id můžeme v dokumentu použít jenom jednou.
Použití atributu id
Atribut id je unikátní identifikátor HTML prvku. Hodnota id musí být jednoznačná v rámci celého dokumentu.
Atribut id používáme ve stylu pro vytvoření zvlášní deklarace, která platí jenom pro prvek označený tímto identifikátorem.
Používá se také v JavaScriptu, když chceme manipulovat jenom s jedním prvkem.
Syntaxe ve stylu je #nas_identifikator, napíšeme mříž # a za ní nějaký název. Samotnou definici stylu uzavřeme do složených závorek { }.
Pomocí id se dají dělat pěkné záložky v HTML dokumentu.
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
#mojehlavicka {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>Atribut id</h2>
<p>Vytvoříme styl pro jednu konkrétní hlavičku.</p>
<h1 id="mojehlavicka">Nadpis s zvláštním stylem</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam erat volutpat. Integer vulputate sem a nibh rutrum consequat. Nulla pulvinar eleifend sem. Aliquam ornare wisi eu metus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Suspendisse sagittis ultrices augue. Fusce nibh. Praesent in mauris eu tortor porttitor accumsan.
</p>
<h1>Nadpis bez stylu</h1>
<p>
Quisque tincidunt scelerisque libero. Proin mattis lacinia justo. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. In dapibus augue non sapien. Nulla non arcu lacinia neque faucibus fringilla. Aliquam ornare wisi eu metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce consectetuer risus a nunc. Nullam at arcu a est sollicitudin euismod. Sed ac dolor sit amet purus malesuada congue.
</p>
</body>
</html>Záložky v HTML stránce
HTML záložky (bookmarks) jsou šikovné na to, abychom se mohli pohybovat ve velké stránce nebo odkazovat někam dovnitř dokumentu.
Nejprve vyvoříme záložku pomocí atributu id, nejlépe v nějakém nadpisu.
<h2 id="k4">Kapitola 4<h2>Potom na tuto záložku můžeme ukázat.
<a href="#k4">Skoč na kapitolu 4</a>Velký příklad je zde.
Použití atributu id v JavaScriptu
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<style>
#mojehlavicka {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>Použití atributu id v JavaScriptu</h2>
<p>JavaScript muže přistupovat ke konkrétnímu prvku pomoí funkce getElementById():</p>
<h1 id="mojehlavicka">Překvapení!</h1>
<button onclick="displayResult()">Zobraz překvapení.</button>
<script>
function displayResult() {
document.getElementById("mojehlavicka").innerHTML = "JavaScriptem jsme změnili nadpis!";
}
</script>
</body>
</html>