జావాస్క్రిప్ట్‌లో HTML DOM ఎలిమెంట్ ఆఫ్‌సెట్‌టాప్ ప్రాపర్టీ అంటే ఏమిటి

Javaskript Lo Html Dom Eliment Aph Set Tap Praparti Ante Emiti



HTML DOM ఎలిమెంట్ ' ఆఫ్‌సెట్‌టాప్ ” ప్రాపర్టీ డాక్యుమెంట్‌కు అనుగుణంగా పేర్కొన్న HTML మూలకం యొక్క అగ్ర స్థానాన్ని అంచనా వేస్తుంది. ఇది ఒక ప్రత్యేక HTML DOM రీడ్-ఓన్లీ ప్రాపర్టీ, దీనిని తరచుగా ఇతర JavaScript ఆఫ్‌సెట్ లక్షణాలతో ఉపయోగించవచ్చు.

ఈ వ్రాత జావాస్క్రిప్ట్‌లోని “ఆఫ్‌సెట్‌టాప్” ప్రాపర్టీ యొక్క పనిని వివరిస్తుంది.

జావాస్క్రిప్ట్‌లో HTML DOM “ఆఫ్‌సెట్‌టాప్” ప్రాపర్టీ ఎలా పని చేస్తుంది?

ది ' ఆఫ్‌సెట్‌టాప్ ” ప్రాపర్టీ HTML మూలకాలపై పని చేస్తుంది మరియు దాని పేరెంట్ ఎలిమెంట్ యొక్క “మార్జిన్”, టాప్ “ప్యాడింగ్”, “బోర్డర్” మరియు “స్క్రోల్ బార్”ని కూడా అందిస్తుంది.







వాక్యనిర్మాణం



మూలకం. ఆఫ్‌సెట్‌టాప్

ఈ వాక్యనిర్మాణంలో, ' మూలకం ” అనేది వ్యూపోర్ట్‌కు సంబంధించి నిర్దిష్ట HTML మూలకం యొక్క అగ్ర స్థానాన్ని సూచిస్తుంది (వెబ్ పేజీ కంటెంట్ ప్రదర్శించబడే ఖాళీ ప్రాంతం).



గమనిక: తిరిగి వచ్చిన విలువ క్రింది వాటిని కలిగి ఉంటుంది:





  • అగ్ర స్థానం మరియు మూలకం యొక్క అంచు.
  • ఎగువ అంచు, స్క్రోల్ బార్ మరియు పేరెంట్ యొక్క పాడింగ్.

పై వాక్యనిర్మాణాన్ని ఆచరణాత్మకంగా ఉపయోగిస్తాము.

ఉదాహరణ: HTML టాప్ పొజిషన్‌ను అంచనా వేయడానికి “ఆఫ్‌సెట్‌టాప్” ప్రాపర్టీని వర్తింపజేయడం

ఈ ఉదాహరణ 'ని ఉపయోగిస్తుంది ఆఫ్‌సెట్‌టాప్ 'నిర్దిష్ట HTML మూలకం యొక్క అగ్ర స్థానాన్ని గణించడానికి ఆస్తి, అనగా,'

పిక్సెల్‌లలో దాని మార్జిన్‌తో సహా.



HTML కోడ్

ముందుగా, కింది HTML కోడ్ ద్వారా వెళ్ళండి:

< div id = 'డివి 1' శైలి = 'పైన:20px; స్థానం: సాపేక్ష;మార్జిన్:15px;సరిహద్దు:3px ఘన బ్లూవైలెట్;టెక్స్ట్-అలైన్:సెంటర్; ప్యాడింగ్:10px;' >

< బి > యొక్క వివరాలు ఇది div ఉన్నాయి : బి >< br >

టాప్ : 20px < br >

స్థానం : బంధువు < br >

వచనం - సమలేఖనం : కేంద్రం < br >

మార్జిన్ : 15px < br >

సరిహద్దు : 3px < br >

div >< br >

< బటన్ క్లిక్ చేయండి = 'jsFunc()' > దాన్ని క్లిక్ చేయండి బటన్ >

< p id = 'కోసం' > p >

పై కోడ్‌లో:

  • ది '
    ” మూలకం “Div1”తో పాటుగా పేర్కొన్న ఐడితో సృష్టించబడింది శైలి 'ప్రకటిత స్టైలింగ్‌ను ప్రదర్శించే ఆస్తి.
  • ఆ తర్వాత, “
    ” యొక్క శరీర విభాగం పేర్కొన్న సమాచారాన్ని నిర్దేశిస్తుంది.
  • తరువాత, “ని ఉపయోగించి బటన్‌ను సృష్టించండి <బటన్> 'అనుబంధాన్ని కలిగి ఉన్న ట్యాగ్' క్లిక్ చేయండి 'ఫంక్షన్ అమలు చేయడానికి ఈవెంట్' jsFunc() ” బటన్ క్లిక్ మీద.
  • చివరగా, '' ద్వారా ఖాళీ పేరాను జోడించండి

    '

    ' మూలకం యొక్క కంప్యూటెడ్ టాప్ పొజిషన్‌ను ప్రదర్శించడానికి 'ట్యాగ్.

జావాస్క్రిప్ట్ కోడ్

ఇప్పుడు, ఇచ్చిన జావాస్క్రిప్ట్ కోడ్‌ను పరిగణించండి:

< స్క్రిప్ట్ >

ఫంక్షన్ jsFunc ( ) {

elmnt ఉంది = పత్రం. getElementById ( 'డివి 1' ) ;

ఎక్కడ txt = 'గణించబడిన ఆఫ్‌సెట్‌టాప్:' + ఎల్మ్ంట్. ఆఫ్‌సెట్‌టాప్ + 'px
'
;

పత్రం. getElementById ( 'కోసం' ) . అంతర్గత HTML = పదము ;

}

స్క్రిప్ట్ >

పై కోడ్ లైన్లలో:

  • ఫంక్షన్ నిర్వచించబడింది ' jsFunc() ”.
  • దాని నిర్వచనంలో, వేరియబుల్ ' ఎల్మ్ంట్ ''తో ప్రకటించబడింది ఉంది 'ఉపయోగించే కీవర్డ్' getElementById() చేర్చబడిన “div”ని దాని id ద్వారా యాక్సెస్ చేసే పద్ధతి “ డివి 1 ”.
  • ఆ తరువాత, వర్తించు ' ఆఫ్‌సెట్‌టాప్ ” పిక్సెల్‌లలో పొందబడిన “div” యొక్క అగ్ర స్థానాన్ని గణించడానికి “txt” వేరియబుల్‌లోని ప్రాపర్టీ.
  • చివరగా, జోడించిన ఖాళీ పేరాను చేరుకోవడానికి మరియు '
    ' మూలకం యొక్క కంప్యూటెడ్ టాప్ పొజిషన్ విలువను '' ద్వారా జోడించడానికి 'getElementById()' మళ్లీ వర్తించబడుతుంది. అంతర్గత HTML ”ఆస్తి.

అవుట్‌పుట్

ఈ ఫలితంలో, ఇచ్చిన div యొక్క అగ్ర స్థానం (మార్జిన్‌తో సహా), అనగా, ' 35px ” అనేది పేర్కొన్న గమనికకు (బ్లాగ్ ప్రారంభంలో) అనుగుణంగా గణించబడుతుంది మరియు బటన్ క్లిక్‌పై ప్రదర్శించబడుతుంది.

ముగింపు

జావాస్క్రిప్ట్ అందిస్తుంది “ ఆఫ్‌సెట్‌టాప్ 'వ్యూపోర్ట్‌కి సంబంధించి HTML మూలకం యొక్క అగ్ర స్థానాన్ని గణించడానికి ఆస్తి. ఇది ఒక మూలకం యొక్క కంప్యూటెడ్ టాప్ పొజిషన్‌ని పూర్ణాంక విలువగా అందిస్తుంది “ పిక్సెల్‌లు ”. జావాస్క్రిప్ట్‌లోని HTML DOM ఎలిమెంట్ “ఆఫ్‌సెట్‌టాప్” ప్రాపర్టీ యొక్క లక్ష్యం, వినియోగం మరియు అమలును ఈ రైట్-అప్ ప్రదర్శించింది.