HTML id attribute

HTML id Egenskapen används för att specificera ett unikt id för ett HTML-element.

Det får inte finnas flera element med samma id i en HTML-dokument.

Använd egenskapen id

id Egenskapen specificerar det unika ID:et för ett HTML-element. id Värdet för egenskapen måste vara unikt i HTML-dokumentet.

id Egenskapen används för att peka på specifika stildeklarationer i en stiltabell. JavaScript kan också använda det för att komma åt och manipulera element med ett specifikt ID.

Skriv en och-tangent (#) följt av ett id-namn. Definiera sedan CSS-egenskaper inom klamrar {}.

nedanstående exempel har vi en <h1> element, som pekar på id-namnet "myHeader". Detta <h1> Elementen kommer att baseras på head-delens #myHeader Stildefinieringar används för att ställa in stilen:

Exempel

<!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>

Prova själv

Kommentar:ID-namn är känsligt för storleksbokstäver!

Kommentar:ID måste innehålla minst en tecken och får inte innehålla blanktecken (utrymme, tabulatorer, etc.).

Skillnaden mellan Class och ID

Samma klass kan användas av flera HTML-element, medan ett id-namn kan användas av endast ett HTML-element på sidan:

Exempel

<style>
/* Ställ in stilen för elementet med id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Ställ in stilen för alla element med klassnamnet "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Element med unik id -->
<h1 id="myHeader">My Cities</h1>
<!-- Element med samma klassnamn -->
<h2 class="city">London</h2>
<p>London är huvudstaden i England.</p>
<h2 class="city">Paris</h2>
<p>Paris är huvudstaden i Frankrike.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo är huvudstaden i Japan.</p>

Prova själv

Tips:Vänligen besök vår CSS-tutorial lär dig mer om CSS.

HTML-bokmärke genom ID och länk

HTML-bokmärke används för att låta läsaren hoppa till specifika delar av sidan.

Om sidan är lång kan bokmärke vara mycket användbart.

För att använda bokmärke måste du först skapa det och sedan lägga till länk till det.

Då du klickar på länken, rullar sidan till positionen med bokmärke.

Exempel

Först, använd id Egenskapar som skapar bokmärken:

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

Lägg sedan till en länk till denna bokmärke på samma sida ("Gå till kapitel 4"):

Exempel

<a href="#C4">Gå till kapitel 4</a>

Prova själv

Eller, på en annan sida, lägg till en länk till denna bokmärke ("Gå till kapitel 4"):

<a href="html_demo.html#C4">Gå till kapitel 4</a>

Använd id-egenskapen i JavaScript

JavaScript kan också utföra vissa uppgifter för specifika element med hjälp av id-egenskapen.

JavaScript kan användas getElementById() Metod för att komma åt element med specifik id:

Exempel

Hantera text med id-egenskapen via JavaScript:

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

Prova själv

Tips:Vänligen HTML JavaScript i detta kapitel, eller våra JavaScript-tutorial lär dig JavaScript.

Sammanfattning av detta kapitel

  • id Egenskapen används för att specificera ett unikt id för HTML-element
  • id Egenskapens värde måste vara unikt i HTML-dokumentet
  • CSS och JavaScript kan användas id Egenskapen används för att välja element eller sätta specifika elements stil
  • id Egenskapens värde är känsligt för storleksbokstäver
  • id Egenskapen kan också användas för att skapa HTML-bokmärken
  • JavaScript kan användas getElementById() Metod för att komma åt element med specifik id