Mfano wa HTML id

Maelezo na matumizi

id Kipimo kinahakikisha kwamba kipimo cha kipimo kinahitajika kwa kipimo kikuu kwenye hatua ya HTML (hivyo kinahitajika kwamba kipimo hiki kina kawaida).

id Kipimo kinapatikana kwa kawaida kwa kujua stili katika sheet ya stili, na kwa kutumia JavaScript (kwa kutumia HTML DOM) kushika elementi yenye id yenye kawaida.

id Kipimo kinaweza kutumiwa kama kiwango cha kina kwa viungo (link anchor).

Tafadhali tazama:

Makala ya HTML:HTML id

Makala ya HTML:Mfano wa HTML ya mafanikio

Makala ya CSS:Mfano wa CSS

Makala ya CSS:CSS #id Machache

Makala ya HTML DOM:Method ya getElementById ya HTML DOM

Makala ya HTML DOM:Kipimo id ya HTML DOM

Makala ya HTML DOM:Mfano wa HTML DOM Style kipengele

Matokeo

Matokeo 1

Tumia kipimo id kubadilisha matukio kwa JavaScript:

<html>
<body>
<h1 id="myHeader">Hakuna matukio!</h1>
<button onclick="displayResult()">Badilisha matukio</button>
<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Kwa kweli siku inayofika!";
}
</script>
</body>
</html>

Jifunze tena

Matokeo mengi inapatikana chini ya page.

Inayofanywa

<kipimo id="id">

Kipimo ya kipimo

Kipimo Maelezo
id

Tumia id kumieleza kipimo kikilo. Mabaya ya ujumbe:

  • Inahitajika kuwa na herufu kwa uwanja
  • Hakuna herufu yasiwe hewani

Matokeo mengi

Matokeo 2

Tumia kipimo id kuwungua kueleza elementi yenye id yenye kina page.

<html>
<body>
<h2><a id="top">Makala fulani</a></h2>
<p>Wenzi wengi wengi ....</p>
<p>Wenzi wengi wengi ....</p>
<p>Wenzi wengi wengi ....</p>
<a href="#top">Arivisha juu</a>
</body>
</html>

Jifunze tena

Mifano 3

Mifano ya kutumia id ya CSS kuwaambia maelezo:

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

Jifunze tena

Mwongozo wa kusaidia kufikia

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Msaada Msaada Msaada Msaada Msaada