HTML id Eigenschap

HTML id Eigenschappen worden gebruikt om een unieke ID toe te wijzen aan een HTML-element.

In een HTML-document mogen geen meerdere elementen met dezelfde ID bestaan.

Gebruik van de id-eigenschap

id De eigenschap specificeert de unieke ID van een HTML-element. id De waarde van de eigenschap moet uniek zijn in een HTML-document.

id Eigenschappen worden gebruikt om naar specifieke stijlverklaringen in een stylesheet te verwijzen. JavaScript kan het ook gebruiken om elementen met een specifieke ID te verkennen en te manipuleren.

De syntaxis van id is: schrijf een streepje (#) gevolgd door een id naam. Vervolgens, definieer je CSS eigenschappen binnen haakjes {}.

volgende voorbeeld hebben we <h1> Element, dat verwijst naar de id naam "myHeader". Dit <h1> Elementen zullen worden gebaseerd op de head sectie #myHeader Stijldefinities worden gebruikt voor stijlinstellingen:

Voorbeeld

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">Mijn Koptekst</h1>
</body>
</html>

probeer het zelf

Opmerking:Id-namen zijn gevoelig voor hoofd- en kleine letters!

Opmerking:Een id moet ten minste één karakter bevatten en mag geen witruimte bevatten (spaties, tabtoetsen, enz.).

Klasse versus ID

Dezelfde klasse naam kan door meerdere HTML-elementen worden gebruikt, terwijl een id naam alleen door één HTML-element op de pagina kan worden gebruikt:

Voorbeeld

<style>
/* Stijl instellen voor het element met de id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Stijl instellen voor alle elementen met de klasse naam "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementen met een unieke id -->
<h1 id="myHeader">Mijn Steden</h1>
<!-- Elementen met dezelfde klasse naam -->
<h2 class="city">London</h2>
<p>London is de hoofdstad van Engeland.</p>
<h2 class="city">Paris</h2>
<p>Paris is de hoofdstad van Frankrijk.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is de hoofdstad van Japan.</p>

probeer het zelf

Tip:Graag in onze CSS Tutorial leer meer over CSS kennis.

HTML favorietmerken worden geïmplementeerd via ID en link

HTML favorietmerken worden gebruikt om lezers te laten springen naar een specifiek deel van de webpagina.

Als de pagina lang is, kan een favorietmerk zeer nuttig zijn.

Om een favorietmerk te gebruiken, moet u het eerst maken en vervolgens een link toevoegen aan het favorietmerk.

Vervolgens, wanneer u op de link klikt, zal de pagina scollen naar de locatie met het favorietmerk.

Voorbeeld

Eerst, gebruik id Eigenschappen maken blazemarks:

<h2 id="C4">Hoofdstuk 4</h2>

Voeg vervolgens een link toe naar deze blazemark op dezelfde pagina ("Spring naar Hoofdstuk 4"):

Voorbeeld

<a href="#C4">Spring naar Hoofdstuk 4</a>

probeer het zelf

Of, voeg op een andere pagina een link toe naar deze blazemark ("Spring naar Hoofdstuk 4"):

<a href="html_demo.html#C4">Spring naar Hoofdstuk 4</a>

Gebruik de id-eigenschap in JavaScript

JavaScript kan ook de id-eigenschap gebruiken om bepaalde taken uit te voeren voor specifieke elementen.

JavaScript kan gebruiken getElementById() Method access to elements with a specific id:

Voorbeeld

Gebruik de id-eigenschap om tekst te verwerken met JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

probeer het zelf

Tip:voer a.u.b. HTML JavaScript in dit hoofdstuk, of onze JavaScript Tutorial leren JavaScript.

Samenvatting van dit hoofdstuk

  • id Eigenschappen worden gebruikt om een unieke id voor HTML-elementen te specificeren
  • id De waarde van de eigenschap moet uniek zijn in het HTML-document
  • CSS en JavaScript kunnen worden gebruikt id Eigenschappen worden gebruikt om elementen te kiezen of de stijl van een specifiek element in te stellen
  • id De waarde van de eigenschap is hoofdlettergevoelig
  • id Eigenschappen kunnen ook worden gebruikt om HTML-blazemarks te maken
  • JavaScript kan gebruiken getElementById() Method access to elements with a specific id