Tento blog demonstruje použití prvku DOM výška klienta v HTML.
Jak používat prvek DOM „clientHeight“ v HTML?
' výška klienta ” umožňuje vývojářům vypočítat výšku viditelného obsahu prvku. Pomáhá při umisťování prvků vůči sobě navzájem nebo při určování, zda uživatel přešel k pravému okraji rolovatelného kontejneru. Poskytuje také informace o zbývajícím nevyužitém prostoru na webové stránce.
Příklad
Pojďme si projít příklad pro lepší demonstraci vlastnosti „clientHeight“. Například „ při kliknutí Posluchač událostí se používá k zobrazení výsledku poskytnutého „ výška klienta ' vlastnictví:
< tělo >
< h2 id = 'živel' < / h2 >
< h2 id = 'živel' při kliknutí = 'showelementHeight()' >
Kliknutím na článek Linuxhint zobrazíte výšku!
< / h2 >
< skript >
function showelementHeight() {
var example = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Výška je: ' + elementHeight + ' pixely.');
}
< / skript > >
< / tělo >
Vysvětlení výše uvedeného fragmentu kódu je popsáno níže:
- Nejprve vytvořte „ “ tag uvnitř “ ” a poskytněte mu nějaká fiktivní data. Také přiřaďte id „ živel ” na vybraný prvek HTML.
- Dále přidejte „ při kliknutí() ” posluchač události, který vyvolá “ showelementHeight() “, když uživatel klikne na “ prvek.
- Poté uvnitř „ showelementHeight() Funkce 'vytváří proměnnou s názvem ' příklad “, který funguje jako instance pro prvek HTML, který má id „ živel “.
- Dále vytvořte další proměnnou s názvem „ elementHeight “, která ukládá výsledek poskytnutý vlastností „clientHeight“.
- Poté zobrazte „ elementHeight ““ proměnná v poli upozornění pomocí „ upozornění() “ metoda.
Nakonec přidejte následující vlastnosti CSS pro stylování „ h2 prvek:
< styl >
#živel {
okraj: 20px;
odsazení: 10px;
Pozadí- barva : tmavě azurová;
výška : 300px;
text- zarovnat : střed;
čára- výška : 100px;
}
< / styl >
Ve výše uvedeném úryvku kódu jsou následující vlastnosti CSS přiřazeny div s id „ živel “:
- ' 20 pixelů “, “ 10px ' a ' darkcyan ” hodnoty jsou poskytovány CSS “ okraj “, “ vycpávka ' a ' barva pozadí “ vlastnosti, resp.
- Využívá také „ výška “, “ zarovnání textu ' a ' výška čáry Vlastnosti CSS pro zlepšení viditelnosti uživatele.
Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto:
Výstup zobrazuje, že výška vybraného prvku je zobrazena ve výstražném poli, kdykoli uživatel klikne na prvek.
Závěr
Chcete-li využít „ výška klienta ” v HTML, vyberte element HTML přístupem k atributu id. Poté připojte vlastnost „clientHeight“ a zobrazte výsledek. Je to vlastnost pouze pro čtení a vrací výsledek v pixelech. Vlastnost 'clientHeight' funguje uvnitř značky '