ఈ వ్రాత జావాస్క్రిప్ట్లోని “ఆఫ్సెట్టాప్” ప్రాపర్టీ యొక్క పనిని వివరిస్తుంది.
జావాస్క్రిప్ట్లో HTML DOM “ఆఫ్సెట్టాప్” ప్రాపర్టీ ఎలా పని చేస్తుంది?
ది ' ఆఫ్సెట్టాప్ ” ప్రాపర్టీ HTML మూలకాలపై పని చేస్తుంది మరియు దాని పేరెంట్ ఎలిమెంట్ యొక్క “మార్జిన్”, టాప్ “ప్యాడింగ్”, “బోర్డర్” మరియు “స్క్రోల్ బార్”ని కూడా అందిస్తుంది.
వాక్యనిర్మాణం
మూలకం. ఆఫ్సెట్టాప్
ఈ వాక్యనిర్మాణంలో, ' మూలకం ” అనేది వ్యూపోర్ట్కు సంబంధించి నిర్దిష్ట HTML మూలకం యొక్క అగ్ర స్థానాన్ని సూచిస్తుంది (వెబ్ పేజీ కంటెంట్ ప్రదర్శించబడే ఖాళీ ప్రాంతం).
గమనిక: తిరిగి వచ్చిన విలువ క్రింది వాటిని కలిగి ఉంటుంది:
- అగ్ర స్థానం మరియు మూలకం యొక్క అంచు.
- ఎగువ అంచు, స్క్రోల్ బార్ మరియు పేరెంట్ యొక్క పాడింగ్.
పై వాక్యనిర్మాణాన్ని ఆచరణాత్మకంగా ఉపయోగిస్తాము.
ఉదాహరణ: HTML టాప్ పొజిషన్ను అంచనా వేయడానికి “ఆఫ్సెట్టాప్” ప్రాపర్టీని వర్తింపజేయడం
ఈ ఉదాహరణ 'ని ఉపయోగిస్తుంది ఆఫ్సెట్టాప్ 'నిర్దిష్ట HTML మూలకం యొక్క అగ్ర స్థానాన్ని గణించడానికి ఆస్తి, అనగా,' ముందుగా, కింది HTML కోడ్ ద్వారా వెళ్ళండి: పై కోడ్లో: ఇప్పుడు, ఇచ్చిన జావాస్క్రిప్ట్ కోడ్ను పరిగణించండి: పై కోడ్ లైన్లలో: అవుట్పుట్ ఈ ఫలితంలో, ఇచ్చిన div యొక్క అగ్ర స్థానం (మార్జిన్తో సహా), అనగా, ' 35px ” అనేది పేర్కొన్న గమనికకు (బ్లాగ్ ప్రారంభంలో) అనుగుణంగా గణించబడుతుంది మరియు బటన్ క్లిక్పై ప్రదర్శించబడుతుంది. జావాస్క్రిప్ట్ అందిస్తుంది “ ఆఫ్సెట్టాప్ 'వ్యూపోర్ట్కి సంబంధించి HTML మూలకం యొక్క అగ్ర స్థానాన్ని గణించడానికి ఆస్తి. ఇది ఒక మూలకం యొక్క కంప్యూటెడ్ టాప్ పొజిషన్ని పూర్ణాంక విలువగా అందిస్తుంది “ పిక్సెల్లు ”. జావాస్క్రిప్ట్లోని HTML DOM ఎలిమెంట్ “ఆఫ్సెట్టాప్” ప్రాపర్టీ యొక్క లక్ష్యం, వినియోగం మరియు అమలును ఈ రైట్-అప్ ప్రదర్శించింది.
HTML కోడ్
< బి > యొక్క వివరాలు ఇది div ఉన్నాయి : బి >< br >
టాప్ : 20px < br >
స్థానం : బంధువు < br >
వచనం - సమలేఖనం : కేంద్రం < br >
మార్జిన్ : 15px < br >
సరిహద్దు : 3px < br >
div >< br >
< బటన్ క్లిక్ చేయండి = 'jsFunc()' > దాన్ని క్లిక్ చేయండి బటన్ >
< p id = 'కోసం' > p >
జావాస్క్రిప్ట్ కోడ్
ఫంక్షన్ jsFunc ( ) {
elmnt ఉంది = పత్రం. getElementById ( 'డివి 1' ) ;
ఎక్కడ txt = 'గణించబడిన ఆఫ్సెట్టాప్:' + ఎల్మ్ంట్. ఆఫ్సెట్టాప్ + 'px
' ;
పత్రం. getElementById ( 'కోసం' ) . అంతర్గత HTML = పదము ;
}
స్క్రిప్ట్ >
ముగింపు