HTML id kenmerk
Die HTML- idkenmerk word gebruik om 'n unieke ID vir 'n HTML-element te spesifiseer.
Jy kan nie meer as een element met dieselfde ID in 'n HTML-dokument hê nie.
Gebruik die id-kenmerk
Die idkenmerk spesifiseer 'n unieke ID vir 'n HTML-element. Die waarde van die id
kenmerk moet uniek wees binne die HTML-dokument.
Die idkenmerk word gebruik om na 'n spesifieke stylverklaring in 'n stylblad te wys. Dit word ook deur JavaScript gebruik om toegang tot die element met die spesifieke id te verkry en te manipuleer.
Die sintaksis vir id is: skryf 'n hash-karakter (#), gevolg deur 'n id-naam. Definieer dan die CSS-eienskappe binne krullerige hakies {}.
In die volgende voorbeeld het ons 'n <h1>element wat na die id-naam "myHeader" wys. Hierdie <h1>
element sal volgens die #myHeader
styldefinisie in die hoofafdeling gestileer word:
Voorbeeld
<!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>
Let wel: Die ID-naam is hooflettersensitief!
Let wel: Die ID-naam moet ten minste een karakter bevat, kan nie met 'n nommer begin nie, en moet nie wit spasies (spasies, oortjies, ens.) bevat nie.
Verskil tussen klas en ID
'n Klasnaam kan deur veelvuldige HTML-elemente gebruik word, terwyl 'n ID-naam slegs deur een HTML-element binne die bladsy gebruik moet word:
Voorbeeld
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Wenk: Jy kan baie meer oor CSS leer in ons CSS-tutoriaal .
HTML-boekmerke met ID en skakels
HTML-boekmerke word gebruik om lesers toe te laat om na spesifieke dele van 'n webblad te spring.
Boekmerke kan nuttig wees as jou bladsy baie lank is.
Om 'n boekmerk te gebruik, moet jy dit eers skep en dan 'n skakel daarby voeg.
Dan, wanneer die skakel geklik word, sal die bladsy blaai na die ligging met die boekmerk.
Voorbeeld
Skep eers 'n boekmerk met die idkenmerk:
<h2 id="C4">Chapter 4</h2>
Voeg dan 'n skakel by die boekmerk ("Spring na Hoofstuk 4") vanaf dieselfde bladsy:
Voorbeeld
<a href="#C4">Jump to Chapter 4</a>
Of voeg 'n skakel by die boekmerk ("Spring na Hoofstuk 4") vanaf 'n ander bladsy:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Gebruik die id-kenmerk in JavaScript
Die idkenmerk kan ook deur JavaScript gebruik word om sekere take vir daardie spesifieke element uit te voer.
JavaScript het toegang tot 'n element met 'n spesifieke ID met die getElementById()metode:
Voorbeeld
Gebruik die idkenmerk om teks met JavaScript te manipuleer:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Wenk: Bestudeer JavaScript in die HTML JavaScript - hoofstuk, of in ons JavaScript-tutoriaal .
Hoofstuk Opsomming
- Die
idkenmerk word gebruik om 'n unieke ID vir 'n HTML-element te spesifiseer - Die waarde van die
idkenmerk moet uniek wees binne die HTML-dokument - Die
idkenmerk word deur CSS en JavaScript gebruik om 'n spesifieke element te styl/kies - Die waarde van die
idkenmerk is hooflettersensitief - Die
idkenmerk word ook gebruik om HTML-boekmerke te skep - JavaScript het toegang tot 'n element met 'n spesifieke id met die
getElementById()metode