ID atribut (Identifier attribute) se koristi za jedinstveno identifikovanje određenog HTML elementa na web stranici. Svaki ID atribut mora biti jedinstven unutar HTML dokumenta, što znači da ne možete dodeliti isti ID više od jednom elementu. ID atribut je često korišćen za ciljanje specifičnih elemenata CSS-om ili za manipulaciju elementima putem JavaScript-a. Evo objašnjenja i primera za ID atribut:
Objašnjenje:
ID atribut: ID atribut se dodeljuje HTML elementima koristeći id atribut, na primer: <div id="mojElement">. Vrednost ID atributa može sadržati slova, brojeve i crte. Obeležje ID atributa treba da bude jedinstveno unutar HTML dokumenta.
Primeri:
Korišćenje ID atributa za ciljanje elementa sa CSS-om:
<!DOCTYPE html>
<html>
<head>
<style>
#mojElement {
color: red;
}
</style>
</head>
<body>
<p>Ovo je <span id="mojElement">crveni</span> tekst.</p>
</body>
</html>
Korišćenje ID atributa za manipulaciju elementa putem JavaScript-a:
<!DOCTYPE html>
<html>
<head>
<script>
function promeniTekst() {
var element = document.getElementById("mojElement");
if (element) {
element.innerText = "Promenjen tekst";
}
}
</script>
</head>
<body>
<p>Ovo je <span id="mojElement">originalni</span> tekst.</p>
<button onclick="promeniTekst()">Promeni tekst</button>
</body>
</html>
Upotreba ID atributa za navigaciju na određeni deo stranice:
<!DOCTYPE html>
<html>
<head>
<style>
#sekcija1 {
background-color: lightblue;
}
#sekcija2 {
background-color: lightgreen;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#sekcija1">Sekcija 1</a></li>
<li><a href="#sekcija2">Sekcija 2</a></li>
</ul>
</nav>
<section id="sekcija1">
<h2>Sekcija 1</h2>
<p>Ovo je prva sekcija.</p>
</section>
<section id="sekcija2">
<h2>Sekcija 2</h2>
<p>Ovo je druga sekcija.</p>
</section>
</body>
</html>
ID atribut je koristan za označavanje i identifikovanje specifičnih elemenata na stranici, omogućava ciljanje tih elemenata putem CSS-a ili JavaScript-a, kao i navigaciju na određene delove stranice. Važno je koristiti jedinstvene vrednosti za ID atribut kako biste izbegli konflikte.
No comments:
Post a Comment