HTML id Attribute

Esempio

Utilizzare l' id attributo per manipolare il testo con JavaScript:

<html>
<body>

<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>

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

</body>
</html>

Prova tu stesso "

Più "Provate voi stessi" esempi di seguito.

Definizione e utilizzo

L' id attributo specifica un unico id per un elemento HTML (il valore deve essere univoco all'interno del documento HTML).

L' id attributo è più utilizzato per puntare a uno stile in un foglio di stile, e da JavaScript (attraverso il DOM HTML) per manipolare l'elemento con la specifica id .

Supporto per il browser

Attributo
id	sì	sì	sì	sì	sì

Differenze tra HTML 4.01 e HTML5

In HTML5, l' id attributo può essere utilizzato suqualsiasi elemento HTML (sarà convalidare su un elemento HTML. Tuttavia, non è necessariamente utile).

In HTML 4.01, la id attributo non può essere utilizzato con: <base>, <head>, <html>, <meta>, <param>, <script>, <style> e <title> .

Nota: HTML 4.01 ha maggiori restrizioni sul contenuto di id valori (ad esempio, in HTML 4.01 id valori non possono iniziare con un numero).

Sintassi

<elementid="id">

I valori degli attributi

Valore	Descrizione
id	Specifica un unico id per l'elemento. Regole di denominazione: Deve contenere almeno un carattere non devono contenere caratteri di spazio In HTML, tutti i valori sono case-insensitive

Altri esempi

esempio 1

Utilizzare l' id attributo per creare un collegamento a un elemento con un specificato id all'interno di una pagina:

<html>
<body>

<h2><a id="top">Some heading</a></h2>

<p>Lots of text....</p>
<p>Lots of text....</p>
<p>Lots of text....</p>

<a href="#top">Go to top</a>

</body>
</html>

Prova tu stesso "

esempio 2

Utilizzare l' id attributo per il testo in stile con i CSS:

<html>
<head>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">w3ii is the best!</h1>

</body>
</html>

Prova tu stesso "