ఈ బ్లాగ్ DOM మూలకం యొక్క ఉపయోగాన్ని ప్రదర్శిస్తుంది క్లయింట్ ఎత్తు HTML లో.
HTMLలో DOM ఎలిమెంట్ “క్లయింట్‌హైట్” ఎలా ఉపయోగించాలి?
ది ' క్లయింట్ ఎత్తు ”ప్రాపర్టీ డెవలపర్‌లు మూలకం యొక్క కనిపించే కంటెంట్ ఎత్తును లెక్కించడానికి అనుమతిస్తుంది. ఇది ఒకదానికొకటి సాపేక్షంగా మూలకాలను ఉంచడంలో లేదా వినియోగదారు స్క్రోల్ చేయదగిన కంటైనర్ యొక్క కుడి అంచుకు స్క్రోల్ చేశారో లేదో నిర్ణయించడంలో సహాయపడుతుంది. ఇది వెబ్‌పేజీలో ఉపయోగించని మిగిలిన స్థలం గురించి సమాచారాన్ని కూడా అందిస్తుంది.
ఉదాహరణ
'క్లయింట్‌హైట్' ప్రాపర్టీ యొక్క మెరుగైన ప్రదర్శన కోసం ఒక ఉదాహరణ ద్వారా నడుద్దాం. ఉదాహరణకు, ' క్లిక్ చేయండి 'ఈవెంట్ లిజనర్ అందించిన ఫలితాన్ని ప్రదర్శించడానికి ఉపయోగించబడుతుంది' క్లయింట్ ఎత్తు 'ఆస్తి:
< శరీరం >
< h2 id = 'మూలకం' >< / h2 >
< h2 id = 'మూలకం' క్లిక్ చేయండి = 'showelementHeight()' >
ఎత్తును చూపించడానికి Linuxhint కథనాన్ని క్లిక్ చేయండి!
< / h2 >
< స్క్రిప్ట్ >
ఫంక్షన్ showelementHeight() {
var ఉదాహరణ = document.getElementById('మూలకం');
var elementHeight= example.clientHeight;
హెచ్చరిక ('ఎత్తు: ' + మూలకం ఎత్తు + 'పిక్సెల్‌లు.');
}
< / స్క్రిప్ట్ > >
< / శరీరం >
పై కోడ్ స్నిప్పెట్ యొక్క వివరణ క్రింద వివరించబడింది:
- ప్రారంభంలో, 'ని సృష్టించండి '' ట్యాగ్ లోపల <బాడీ> ” ట్యాగ్ చేసి దానికి కొంత డమ్మీ డేటా అందించండి. అలాగే, '' యొక్క ఐడిని కేటాయించండి మూలకం ” ఎంచుకున్న HTML మూలకానికి.
- తరువాత, ఒక 'ని జోడించండి onclick() ' ఈవెంట్ వినేవారు ' షోలెమెంట్ ఎత్తు() 'వినియోగదారు 'పై క్లిక్ చేసినప్పుడు ఫంక్షన్ ' మూలకం.
- అప్పుడు, లోపల ' షోలెమెంట్ ఎత్తు() 'ఫంక్షన్' అనే వేరియబుల్‌ను సృష్టిస్తుంది ఉదాహరణ 'ఇది ' అనే ఐడిని కలిగి ఉన్న HTML మూలకానికి ఉదాహరణగా పనిచేస్తుంది మూలకం ”.
- తరువాత, '' పేరుతో మరొక వేరియబుల్ సృష్టించండి మూలకం ఎత్తు ’’ ఇది “క్లయింట్‌హైట్” ప్రాపర్టీ ద్వారా అందించబడిన ఫలితాన్ని నిల్వ చేస్తుంది.
- ఆ తరువాత, ప్రదర్శించు ' మూలకం ఎత్తు ’’ ఉపయోగించి హెచ్చరిక పెట్టెలో వేరియబుల్ హెచ్చరిక() ” పద్ధతి.
ముగింపులో, స్టైలింగ్ కోసం క్రింది CSS లక్షణాలను జోడించండి h2 ' మూలకం:
< శైలి >
#మూలకం {
మార్జిన్: 20px;
పాడింగ్: 10px;
నేపథ్య- రంగు : డార్క్సియాన్;
ఎత్తు : 300px;
వచనం- సమలేఖనం : కేంద్రం;
లైన్- ఎత్తు : 100px;
}
< / శైలి >
పై కోడ్ స్నిప్పెట్‌లో, కింది CSS లక్షణాలు 'ఐడిని కలిగి ఉన్న divకి కేటాయించబడ్డాయి మూలకం ”:
- ది ' 20px ',' 10px 'మరియు' ముదురు రంగు 'విలువలు CSSకి అందించబడ్డాయి' మార్జిన్ ',' పాడింగ్ 'మరియు' నేపథ్య రంగు ” లక్షణాలు, వరుసగా.
- కూడా ఉపయోగిస్తుంది ' ఎత్తు ',' టెక్స్ట్-అలైన్ 'మరియు' లైన్-ఎత్తు ” వినియోగదారు దృశ్యమానతను మెరుగుపరచడానికి CSS లక్షణాలు.
ఎగువ కోడ్ స్నిప్పెట్‌ని అమలు చేసిన తర్వాత, వెబ్‌పేజీ ఇలా కనిపిస్తుంది:
వినియోగదారు ఎలిమెంట్‌పై క్లిక్ చేసినప్పుడల్లా, ఎంచుకున్న మూలకం యొక్క ఎత్తు హెచ్చరిక పెట్టెలో ప్రదర్శించబడుతుందని అవుట్‌పుట్ ప్రదర్శిస్తుంది.
ముగింపు
ఉపయోగించుకోవడానికి ' క్లయింట్ ఎత్తు ” HTMLలో ప్రాపర్టీ, id అట్రిబ్యూట్‌ని యాక్సెస్ చేయడం ద్వారా HTML ఎలిమెంట్‌ని ఎంచుకోండి. ఆ తర్వాత, 'clientHeight' ఆస్తిని జోడించి, ఫలితాన్ని ప్రదర్శించండి. ఇది చదవడానికి మాత్రమే ప్రాపర్టీ మరియు పిక్సెల్‌లలో ఫలితాన్ని అందిస్తుంది. “clientHeight” ప్రాపర్టీ “