Tämä blogi esittelee DOM-elementin käyttöä asiakkaan korkeus HTML:ssä.
Kuinka käyttää DOM-elementtiä 'clientHeight' HTML:ssä?
' asiakkaan korkeus ” -ominaisuuden avulla kehittäjät voivat laskea elementin näkyvän sisällön korkeuden. Se auttaa kohdistamaan elementtejä suhteessa toisiinsa tai määrittämään, onko käyttäjä vierittänyt vieritettävän säiliön oikeaan reunaan. Se tarjoaa myös tietoa jäljellä olevasta käyttämättömästä tilasta verkkosivulla.
Esimerkki
Käydään läpi esimerkki, joka osoittaa paremmin 'clientHeight'-ominaisuuden. Esimerkiksi ' klikkaamalla tapahtuman kuuntelijaa käytetään näyttämään '' asiakkaan korkeus ”omaisuus:
< kehon >
< h2 id = 'elementti' >< / h2 >
< h2 id = 'elementti' klikkaamalla = 'showelementHeight()' >
Napsauta Linuxhint-artikkelia nähdäksesi Height!
< / h2 >
< käsikirjoitus >
function showelementHeight() {
var esimerkki = document.getElementById('element');
var elementKorkeus= example.clientHeight;
alert('Korkeus on: ' + elementKorkeus + ' pikseliä.');
}
< / käsikirjoitus > >
< / kehon >
Yllä olevan koodinpätkän selitys on kuvattu alla:
- Luo aluksi ' -tunnisteen '' sisällä ” -tunnisteen ja anna siihen joitain vääriä tietoja. Määritä myös tunnus ' elementti ” valittuun HTML-elementtiin.
- Lisää seuraavaksi ' klikkaamalla() 'tapahtuman kuuntelija, joka kutsuu ' näytäelementin korkeus() ' -toimintoa, kun käyttäjä napsauttaa ' ”elementtiä.
- Sitten sisällä ' näytäelementin korkeus() '-funktio luo muuttujan nimeltä ' esimerkki ', joka toimii esiintymänä HTML-elementille, jonka tunnus on ' elementti ”.
- Luo seuraavaksi toinen muuttuja nimeltä ' elementin korkeus ', joka tallentaa 'clientHeight'-ominaisuuden antaman tuloksen.
- Tämän jälkeen näytä ' elementin korkeus ''-muuttuja hälytysruudussa käyttämällä ' hälytys() ”menetelmä.
Lisää lopuksi seuraavat CSS-ominaisuudet muotoilemaan ' h2 ”elementti:
< tyyli >
#elementti {
marginaali: 20px;
täyte: 10px;
tausta- väri : tumma syaani;
korkeus : 300 pikseliä;
teksti- kohdistaa : keskus;
linja- korkeus : 100px;
}
< / tyyli >
Yllä olevassa koodinpätkässä seuraavat CSS-ominaisuudet on määritetty div:lle, jonka tunnus on ' elementti ':
- ' 20px ”, “ 10px ' ja ' tumma syaani 'arvot toimitetaan CSS:lle' marginaali ”, “ pehmuste ' ja ' taustaväri ”-ominaisuuksia.
- Käyttää myös ' korkeus ”, “ tekstin tasaus ' ja ' viivankorkeus ” CSS-ominaisuudet parantavat käyttäjien näkyvyyttä.
Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä:
Tulos näyttää, että valitun elementin korkeus näkyy hälytysruudussa aina, kun käyttäjä napsauttaa elementtiä.
Johtopäätös
Käyttääksesi ' asiakkaan korkeus ”-ominaisuutta HTML:ssä, valitse HTML-elementti käyttämällä id-attribuuttia. Liitä sen jälkeen 'clientHeight'-ominaisuus ja näytä tulos. Se on vain luku -ominaisuus ja palauttaa tuloksen pikseleinä. Ominaisuus 'clientHeight' toimii '