Tento blog demonštruje použitie prvku DOM výška klienta v HTML.
Ako používať prvok DOM „clientHeight“ v HTML?
' výška klienta ” umožňuje vývojárom vypočítať výšku viditeľného obsahu prvku. Pomáha pri umiestňovaní prvkov voči sebe navzájom alebo pri určovaní, či používateľ roloval k pravému okraju rolovateľného kontajnera. Poskytuje tiež informácie o zostávajúcom nevyužitom priestore na webovej stránke.
Príklad
Prejdime si príklad na lepšiu demonštráciu vlastnosti „clientHeight“. Napríklad „ po kliknutí “ poslucháč udalostí sa používa na zobrazenie výsledku poskytnutého „ výška klienta ' nehnuteľnosť:
< telo >
< h2 id = 'element' < / h2 >
< h2 id = 'element' po kliknutí = 'showelementHeight()' >
Kliknutím na článok Linuxhint zobrazíte výšku!
< / h2 >
< skript >
function showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Výška je: ' + výška prvku + ' pixely.');
}
< / skript > >
< / telo >
Vysvetlenie vyššie uvedeného útržku kódu je popísané nižšie:
- Najprv vytvorte „ 'značka vo vnútri ' ” a poskytnite mu nejaké fiktívne údaje. Tiež priraďte id „ element ” na vybraný prvok HTML.
- Ďalej pridajte „ po kliknutí() ” poslucháč udalosti, ktorý vyvoláva “ showelementHeight() “, keď používateľ klikne na „ ' element.
- Potom vo vnútri „ showelementHeight() Funkcia “vytvorí premennú s názvom “ príklad “, ktorý funguje ako inštancia pre prvok HTML, ktorý má id „ element “.
- Potom vytvorte ďalšiu premennú s názvom „ elementHeight “, ktorý ukladá výsledok poskytnutý vlastnosťou „clientHeight“.
- Potom zobrazte „ elementHeight ““ premenná na výstražnom poli pomocou „ upozornenie() “.
Nakoniec pridajte nasledujúce vlastnosti CSS na úpravu štýlu „ h2 ' element:
< štýl >
#element {
okraj: 20px;
výplň: 10px;
pozadie- farba : tmavozelená;
výška : 300px;
text- zarovnať : stred;
riadok- výška : 100px;
}
< / štýl >
Vo vyššie uvedenom útržku kódu sú nasledujúce vlastnosti CSS priradené k prvku div s id „ element “:
- ' 20 pixelov “, “ 10 pixelov “ a „ darkcyan “hodnoty sú poskytnuté CSS “ marža “, “ vypchávka “ a „ farba pozadia vlastnosti, resp.
- Využíva aj „ výška “, “ zarovnanie textu “ a „ line-height Vlastnosti CSS na zlepšenie viditeľnosti používateľa.
Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:
Výstup zobrazuje, že výška vybraného prvku sa zobrazí vo výstražnom poli vždy, keď používateľ klikne na prvok.
Záver
Na využitie „ výška klienta ” v HTML, vyberte element HTML prístupom k atribútu id. Potom pripojte vlastnosť „clientHeight“ a zobrazte výsledok. Je to vlastnosť len na čítanie a vracia výsledok v pixeloch. Vlastnosť „clientHeight“ funguje vo vnútri značky „