HTML id-ominaisuus

HTML id Ominaisuus käytetään HTML-elementin yksilöllisen ID:n määrittämiseen.

HTML-dokumentissa ei voi olla useita elementtejä, joilla on sama id.

Käytä id-ominaisuutta

id Ominaisuus määrittää HTML-elementin yksilöllisen ID:n. id Ominaisuuden arvon täytyy olla yksilöllinen HTML-dokumentissa.

id Ominaisuus osoittaa tiettyyn tyyleihin CSS-taulukossa. JavaScript voi myös käyttää sitä saadakseen ja muokata elementtiä, jolla on tietty ID.

id-kieli on: kirjoita yksi kolmeosama (#), jonka jälkeen id-nimi. Sitten määritä CSS-ominaisuudet kulmioiden {} sisällä.

esimerkissä meillä on <h1> elementtiin, joka osoittaa id-nimeen "myHeader". Tämä <h1> Elementti perustuu head-osan #myHeader Tyyli määritetään tyylimäärittelyillä:

Esimerkki

<!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>

Kokeile itse

Huomautus:ID-nimen kirjoitusasu on merkityksellistä!

Huomautus:ID:n täytyy sisältää vähintään yksi merkki, eikä se saa sisältää välilyöntejä (avaruusmerkit, tabulaattorit jne.).

Luokan ja ID:n ero

Sama luokka voidaan käyttää useilla HTML-elementeillä, mutta id-nimellä voi olla vain yksi elementti sivulla:

Esimerkki

<style>
/* Määritä id:n "myHeader" elementin tyylit */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Määritä luokan "city" kaikkien elementtien tyylit */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Elementillä voi olla ainutlaatuinen id -->
<h1 id="myHeader">My Cities</h1>
<!-- Useita elementtejä voi olla samanlaisella luokkana -->
<h2 class="city">London</h2>
<p>London on Englannin pääkaupunki.</p>
<h2 class="city">Paris</h2>
<p>Paris on Ranskan pääkaupunki.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo on Japanin pääkaupunki.</p>

Kokeile itse

Vinkki:Käy meidän CSS opetusohjelma opastaa CSS-tietämystäsi.

HTML-kirjanmerkit toteutetaan ID:n ja linkin avulla

HTML-kirjanmerkit auttavat lukijaa siirtymään suoraan sivun tiettyyn osaan.

Jos sivu on pitkä, kirjanmerkit voivat olla hyödyllisiä.

Jotta voit käyttää kirjanmerkkiä, sinun täytyy ensin luoda se ja sitten lisätä siihen linkki.

Sitten, kun napsautat linkkiä, sivu pyörii kohtaan, jossa on kirjanmerkki.

Esimerkki

Ensimmäinen askel on id Atribuutti luo kirjanmerkin:

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

Lisää sitten samalle sivulle linkki tähän kirjanmerkkiin ("Siirry lukuun 4"):

Esimerkki

<a href="#C4">Siirry lukuun 4</a>

Kokeile itse

Tai lisää toiselle sivulle linkki tähän kirjanmerkkiin ("Siirry lukuun 4"):

<a href="html_demo.html#C4">Siirry lukuun 4</a>

Käytä id-attribuuttia JavaScriptissä

JavaScript voi myös käyttää id-attribuuttia suorittamaan tiettyjä tehtäviä tiettyä elementtiä varten.

JavaScript voi käyttää getElementById() Menetelmä saavuttaa elementti, jolla on tietty id:

Esimerkki

Käytä id-attribuuttia JavaScriptin kautta tekstin käsittelyyn:

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

Kokeile itse

Vinkki:Ole hyvä ja HTML JavaScript Tässä luvussa tai JavaScript opetusohjelma Opitaan JavaScriptistä tästä

Luku yhteenvedon

  • id Atribuutti käytetään HTML-elementin yksilöllisen id:n määrittämiseen
  • id Atribuutin arvon on oltava yksilöllinen HTML-dokumentissa
  • CSS ja JavaScript voivat käyttää id Atribuutti käytetään elementin valitsemiseen tai tietyn elementin tyylittelyyn
  • id Atribuutin arvo on erottuva iskutilan mukaan
  • id Atribuutti voidaan käyttää HTML kirjanmerkin luomiseen
  • JavaScript voi käyttää getElementById() Menetelmä saavuttaa elementti, jolla on tietty id