Proprietà id HTML

HTML id L'attributo viene usato per assegnare un ID unico agli elementi HTML.

Un documento HTML non può avere più di un elemento con lo stesso id.

Uso dell'attributo id

id L'attributo specifica l'ID unico dell'elemento HTML. id Il valore dell'attributo deve essere unico nell'HTML documento.

id Le proprietà sono usate per puntare a dichiarazioni di stile specifiche nel foglio di stile. JavaScript può anche usarle per accedere e manipolare gli elementi con un ID specifico.

La sintassi di id è: scrivere un numero di modello (#), seguito da un nome di id. Poi, definire le proprietà CSS tra parentesi graffe {}.

Esempio sottostante abbiamo <h1> che punta al nome dell'id "myHeader". Questo <h1> Gli elementi verranno posizionati in base all'elemento #myHeader Le definizioni di stile vengono utilizzate per impostare lo stile:

Esempio

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

Prova personalmente

Nota:Il nome dell'id è sensibile alle maiuscole e minuscole!

Nota:Un id deve contenere almeno un carattere e non può contenere spazi o altri caratteri di separazione (spazi, tabulazioni, ecc.).

Differenze tra Class e ID

La stessa classe può essere utilizzata da più elementi HTML, mentre un nome di id può essere utilizzato solo da un singolo elemento HTML della pagina:

Esempio

<style>
/* Definire lo stile per l'elemento con l'id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Definire lo stile per tutti gli elementi con il nome di classe "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementi con un id univoco -->
<h1 id="myHeader">Le mie Città</h1>
<!-- Elementi con lo stesso nome di classe -->
<h2 class="city">London</h2>
<p>London è la capitale dell'Inghilterra.</p>
<h2 class="city">Parigi</h2>
<p>Parigi è la capitale della Francia.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo è la capitale del Giappone.</p>

Prova personalmente

Suggerimento:Si prega di visitare il nostro Corso di CSS per imparare di più sulla CSS.

Realizzazione dei segnalibri HTML tramite ID e link

I segnalibri HTML sono utilizzati per permettere ai lettori di saltare a parti specifiche della pagina web.

Se la pagina è lunga, i segnalibri possono essere molto utili.

Per utilizzare i segnalibri, è necessario crearli prima e poi aggiungere i link ad essi.

Poi cliccando sul link, la pagina scorrerà fino alla posizione con il segnalibro.

Esempio

Prima di tutto, id Creazione di un segnalibro con l'attributo:

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

Poi, nella stessa pagina, aggiungi un link a questo segnalibro ("Vai al capitolo 4"):

Esempio

<a href="#C4">Vai al capitolo 4</a>

Prova personalmente

O, in un'altra pagina, aggiungi un link a questo segnalibro ("Vai al capitolo 4"):

<a href="html_demo.html#C4">Vai al capitolo 4</a>

L'uso dell'attributo id in JavaScript

JavaScript può anche eseguire determinate operazioni per un elemento specifico utilizzando l'attributo id.

JavaScript può essere utilizzato getElementById() Metodo per accedere agli elementi con un id specifico:

Esempio

Gestisci il testo utilizzando l'attributo id con JavaScript:

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

Prova personalmente

Suggerimento:Si prega di HTML JavaScript In questo capitolo, o nei nostri Corso di JavaScript Impara JavaScript qui.

Conclusione di questo capitolo

  • id L'attributo viene utilizzato per specificare un id unico per l'elemento HTML
  • id Il valore dell'attributo deve essere unico nell'HTML documento
  • CSS e JavaScript possono essere utilizzati id L'attributo può essere utilizzato per selezionare elementi o impostare lo stile di un elemento specifico
  • id Il valore dell'attributo distingue tra maiuscole e minuscole
  • id L'attributo può anche essere utilizzato per creare un segnalibro HTML
  • JavaScript può essere utilizzato getElementById() Metodo per accedere agli elementi con un id specifico