Šis tinklaraštis demonstruoja DOM elemento naudojimą kliento ūgis HTML.
Kaip HTML naudoti DOM elementą „clientHeight“?
„ kliento ūgis “ ypatybė leidžia kūrėjams apskaičiuoti elemento matomo turinio aukštį. Tai padeda nustatyti elementus vienas kito atžvilgiu arba nustatyti, ar vartotojas slinko iki dešiniojo slenkamojo konteinerio krašto. Taip pat pateikiama informacija apie likusią nepanaudotą vietą tinklalapyje.
Pavyzdys
Peržiūrėkime pavyzdį, kad geriau parodytume „clientHeight“ savybę. Pavyzdžiui, „ paspaudus “ įvykių klausytojas naudojamas rezultatui, kurį pateikia “ kliento ūgis ' nuosavybė:
< kūnas >
< h2 id = 'elementas' >< / h2 >
< h2 id = 'elementas' paspaudus = 'showelementHeight()' >
Spustelėkite „Linuxhint“ straipsnį, kad pamatytumėte ūgį!
< / h2 >
< scenarijus >
function showelementHeight() {
var pavyzdys = document.getElementById('element');
var elementHeight= example.clientHeight;
alert('Aukštis yra: ' + elementHeight + ' pikseliai.');
}
< / scenarijus > >
< / kūnas >
Aukščiau pateikto kodo fragmento paaiškinimas aprašytas toliau:
- Iš pradžių sukurkite „ ' žyma '' viduje
“ žymą ir pateikite jai fiktyvių duomenų. Taip pat priskirkite „ID“ elementas “ į pasirinktą HTML elementą. - Tada pridėkite „ paspaudus() įvykių klausytojas, kuris iškviečia Rodyti elemento Aukštis() “ funkcija, kai vartotojas spusteli “ “ elementas.
- Tada viduje „ Rodyti elemento Aukštis() ' funkcija sukuria kintamąjį pavadinimu ' pavyzdys “, kuris veikia kaip HTML elemento, kurio ID yra „, pavyzdys elementas “.
- Tada sukurkite kitą kintamąjį pavadinimu ' elementasAukstis “, kurioje išsaugomas „clientHeight“ savybės pateiktas rezultatas.
- Po to parodykite „ elementasAukstis “ kintamasis įspėjimo laukelyje naudojant „ budrus() “ metodas.
Pabaigoje pridėkite šias CSS ypatybes, kad sukurtumėte „ h2 “ elementas:
< stilius >
#elementas {
paraštė: 20 pikselių;
pamušalas: 10px;
fonas- spalva : tamsiai mėlyna;
aukščio : 300 taškų;
tekstas- lygiuotis : centras;
linija - aukščio : 100 taškų;
}
< / stilius >
Aukščiau pateiktame kodo fragmente šios CSS ypatybės yra priskirtos div, kurio ID yra ' elementas “:
- „ 20 piks “, „ 10 piks “ ir „ tamsiai žydros spalvos ' reikšmės pateikiamos CSS ' marža “, „ kamšalas “ ir „ fono spalva “ savybes, atitinkamai.
- Taip pat naudoja ' aukščio “, „ teksto lygiavimas “ ir „ linijos aukštis CSS ypatybės, skirtos pagerinti naudotojo matomumą.
Įvykdžius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:
Išvestis rodo, kad pasirinkto elemento aukštis rodomas įspėjimo laukelyje, kai tik vartotojas spustelėja elementą.
Išvada
Norėdami panaudoti „ kliento ūgis ” ypatybę HTML, pasirinkite HTML elementą pasiekdami id atributą. Po to pridėkite ypatybę „clientHeight“ ir parodykite rezultatą. Tai yra tik skaitoma nuosavybė ir pateikia rezultatą pikseliais. Ypatybė „clientHeight“ veikia žymos „