HTML id -ominaisuus

Määrittely ja käyttö

id Ominaisuus määrittelee HTML-elementin ainutlaatuisen id:n (arvon täytyy olla yksilöllinen HTML-dokumentissa).

id Ominaisuus käytetään yleensä osoittamaan tyyliarkkua (CSS) ja hallitsemaan JavaScriptin (HTML DOM) avulla tiettyä id:tä omaavaa elementtiä.

id Ominaisuus voidaan käyttää linkin ankkurina (link anchor).

Katso myös:

HTML -opas:HTML id

HTML -opas:HTML -ominaisuudet

CSS -opas:CSS -syntaksi

CSS -viittausopas:CSS #id Valitsimet

HTML DOM -viittausopas:HTML DOM getElementById() -menetelmä

HTML DOM -viittausopas:HTML DOM id-ominaisuus

HTML DOM -viittausopas:HTML DOM Style -objekti

Esimerkki

Esimerkki 1

Muuta tekstiä JavaScriptin avulla id-ominaisuuksien avulla:

<html>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Muuta tekstiä</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>

Kokeile itse

Sivun alaosassa on lisää esimerkkejä.

Syntaksi

<elementti id="id">

Ominaisuusarvo

Arvo Kuvaus
id

Määritä elementille ainutlaatuinen id. Nimeämisohjeet:

  • MUSTAA sisältää vähintään yhden merkin
  • Ei voi sisältää minkäänlaisia välilyöntejä

Lisää esimerkkejä

Esimerkki 2

Käytä id-ominaisuutta liittääksesi sivun sisäiseen elementtiin, jolla on tietty id:

<html>
<body>
<h2><a id="top">Oma otsikko</a></h2>
<p>Paljon tekstiä ....</p>
<p>Paljon tekstiä ....</p>
<p>Paljon tekstiä ....</p>
<a href="#top">Palaa ylös</a>
</body>
</html>

Kokeile itse

Esimerkki 3

Käytä id-ominaisuutta CSS-tyyleillä tekstin muotoiluun:

<html>
<head>
<style>
#myHeader {
  color: red;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">CodeW3C.com on paras!</h1>
</body>
</html>

Kokeile itse

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki