Šis emuārs parāda DOM elementa izmantošanu klienta augstums HTML.
Kā HTML izmantot DOM elementu “clientHeight”?
' klienta augstums Īpašums ļauj izstrādātājiem aprēķināt elementa redzamā satura augstumu. Tas palīdz pozicionēt elementus attiecībā pret otru vai noteikt, vai lietotājs ir ritinājis līdz ritināmā konteinera labajai malai. Tas arī sniedz informāciju par atlikušo neizmantoto vietu tīmekļa lapā.
Piemērs
Apskatīsim piemēru, lai labāk parādītu īpašību “clientHeight”. Piemēram, “ onclick ' notikumu klausītājs tiek izmantots, lai parādītu rezultātu, ko nodrošina ' klienta augstums ” īpašums:
< ķermeni >
< h2 id = 'elements' >< / h2 >
< h2 id = 'elements' onclick = 'showelementHeight()' >
Noklikšķiniet uz Linuxhint raksta, lai parādītu augstumu!
< / h2 >
< skripts >
function showelementHeight() {
var piemērs = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Augstums ir: ' + elementAugstums + ' pikseļi.');
}
< / skripts > >
< / ķermeni >
Iepriekš minētā koda fragmenta skaidrojums ir aprakstīts tālāk:
- Sākumā izveidojiet ' ' tags iekšpusē ' ” tagu un sniedziet tam dažus fiktīvus datus. Piešķiriet arī ID ' elements ” uz atlasīto HTML elementu.
- Pēc tam pievienojiet ' onclick () notikumu klausītājs, kas izsauc parādītelementa augstums() funkcija, kad lietotājs noklikšķina uz ” elements.
- Pēc tam iekšpusē ' parādītelementa augstums() ' funkcija izveido mainīgo ar nosaukumu ' piemērs ', kas darbojas kā HTML elementa gadījums, kura ID ir ' elements ”.
- Pēc tam izveidojiet citu mainīgo ar nosaukumu ' elementsAugstums “, kurā tiek saglabāts rekvizīta “clientHeight” sniegtais rezultāts.
- Pēc tam parādiet ' elementsAugstums “” mainīgais brīdinājuma lodziņā, izmantojot “ brīdinājums () ” metode.
Beigās pievienojiet šādus CSS rekvizītus, lai veidotu ' h2 ” elements:
< stils >
#elements {
piemale: 20 pikseļi;
polsterējums: 10 pikseļi;
fons- krāsa : tumši zils;
augstums : 300 pikseļi;
teksts- izlīdzināt : centrs;
līnija- augstums : 100 pikseļi;
}
< / stils >
Iepriekš minētajā koda fragmentā divi ir piešķirti šādi CSS rekvizīti, kuru ID ir “ elements ”:
- ' 20 pikseļi ”, “ 10 pikseļi ' un ' tumši zils 'vērtības tiek nodrošinātas CSS' starpība ”, “ polsterējums ' un ' fona krāsa ” īpašības, attiecīgi.
- Izmanto arī ' augstums ”, “ teksta līdzināšana ' un ' līnijas augstums ” CSS rekvizīti, lai uzlabotu lietotāja redzamību.
Pēc iepriekš minētā koda fragmenta izpildes tīmekļa lapa izskatās šādi:
Izvade parāda, ka atlasītā elementa augstums tiek parādīts brīdinājuma lodziņā ikreiz, kad lietotājs noklikšķina uz elementa.
Secinājums
Lai izmantotu ' klienta augstums ” rekvizītu HTML, atlasiet HTML elementu, piekļūstot atribūtam id. Pēc tam pievienojiet rekvizītu “clientHeight” un parādiet rezultātu. Tas ir tikai lasāms īpašums un atgriež rezultātu pikseļos. Rekvizīts “clientHeight” darbojas tagā “