ఈ పోస్ట్ జావాస్క్రిప్ట్‌లోని విండో ఆబ్జెక్ట్ యొక్క “getComputedStyle()” పద్ధతి యొక్క లక్ష్యం, పని మరియు వినియోగాన్ని వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో విండో ఆబ్జెక్ట్ యొక్క “getComputedStyle()” విధానం ఏమి చేస్తుంది?
ది ' getComputedStyle() ” పద్ధతి CSS లక్షణాలు మరియు వాటి విలువల సేకరణను కలిగి ఉన్న “CSSStyleDeclaration” ఆబ్జెక్ట్‌ని అందిస్తుంది. ఇది లక్ష్యం చేయబడిన HTML మూలకం స్టైలింగ్ లక్షణాలను గణిస్తుంది. అదనంగా, ఇది HTML మూలకం యొక్క నిర్దిష్ట భాగం యొక్క స్టైలింగ్ లక్షణాలను గణించడంలో కూడా ముఖ్యమైన పాత్ర పోషిస్తుంది.
వాక్యనిర్మాణం
కిటికీ. getComputedStyle ( మూలకం , సూడో ఎలిమెంట్ )
పై వాక్యనిర్మాణంలో:
- కిటికీ: ఇది బ్రౌజర్ విండోను సూచించే గ్లోబల్ ఆబ్జెక్ట్.
- మూలకం: ఇది నిర్దిష్ట HTML మూలకాన్ని నిర్దేశిస్తుంది, దీని శైలిని గణించవలసి ఉంటుంది.
- సూడో ఎలిమెంట్: ఇది ఇచ్చిన HTML మూలకం యొక్క భాగాన్ని సూచిస్తుంది ఉదా., మొదటి అక్షరం, చివరి అక్షరం మొదలైనవి.
కింది విభాగం ఉదాహరణల సహాయంతో “getComputedStyle()” పద్ధతి యొక్క ఆచరణాత్మక దృష్టాంతాన్ని నిర్వహిస్తుంది.
HTML కోడ్ (CSS స్టైలింగ్‌తో సహా)
ముందుగా, కింది HTML కోడ్ యొక్క అవలోకనాన్ని కలిగి ఉండండి:
< తల >
< శైలి >
h3{
ఫాంట్ పరిమాణం: 20px;
నేపథ్య రంగు:ఆకుపచ్చ రంగు
}
< / శైలి >
< / తల >
< శరీరం >
< h2 > getComputedStyle() విండో ఆబ్జెక్ట్ పద్ధతిని ఉపయోగించండి < / h2 >
< h3 id = 'డెమో' > ఇచ్చిన HTML మూలకం యొక్క ఫాంట్ పరిమాణం: < / h3 >
< p id = 'నమూనా' >< / p >
పై కోడ్ లైన్లలో:
- ది ' <శైలి> 'ట్యాగ్' యొక్క పేర్కొన్న స్టైలింగ్‌ను వర్తిస్తుంది HTML మూలకం.
- లో ' <బాడీ> 'విభాగం, 'లో ఉపశీర్షిక చేర్చబడింది ”
- తర్వాత, “
” మూలకం ఐడి “ డెమో ” రెండవ ఉపశీర్షికను నిర్దేశిస్తుంది.
- చివరగా, ' 'ట్యాగ్ ఐడితో ఖాళీ పేరాను సూచిస్తుంది' నమూనా ” లక్ష్యం చేయబడిన మూలకం యొక్క కంప్యూటెడ్ CSS లక్షణాలను ప్రదర్శించడం కోసం.
గమనిక: ఈ పోస్ట్ యొక్క పేర్కొన్న అన్ని ఉదాహరణలలో ఈ HTML కోడ్ అనుసరించబడుతుంది.
ఉదాహరణ 1: HTML మూలకం యొక్క ఫాంట్ పరిమాణాన్ని గణించడానికి “getComputedStyle()” పద్ధతిని వర్తింపజేయడం
లక్ష్య HTML మూలకం యొక్క ఫాంట్ పరిమాణాన్ని పొందడానికి ఈ ఉదాహరణ “getComputedStyle()” పద్ధతిని వర్తిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
పేర్కొన్న జావాస్క్రిప్ట్ కోడ్‌ను పరిగణించండి:
< స్క్రిప్ట్ >స్థిరంగా మూలకం = పత్రం. getElementById ( 'డెమో' ) ;
స్థిరంగా obj = కిటికీ. getComputedStyle ( మూలకం )
లెట్ పరిమాణం = obj ప్రాపర్టీ విలువ పొందండి ( 'ఫాంట్ పరిమాణం' ) ;
పత్రం. getElementById ( 'నమూనా' ) . అంతర్గత HTML = పరిమాణం ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో:
- ఒక వేరియబుల్ ప్రకటించండి' మూలకం ”ని ఉపయోగించుకునే “const” కీవర్డ్‌తో getElementById() '
' మూలకాన్ని దాని ఐడి ద్వారా యాక్సెస్ చేసే పద్ధతి ' డెమో ”.
- ఆ తరువాత, వర్తించు ' getComputedStyle() పొందబడిన “
” మూలకం యొక్క CSS లక్షణాలను గణించే పద్ధతి.
- తరువాత, ' పరిమాణం 'వేరియబుల్ వర్తిస్తుంది' getPropertyValue() 'అనువర్తిత CSS ఆస్తి విలువను తిరిగి ఇచ్చే పద్ధతి' ఫాంట్ పరిమాణం ” తీగలాగ.
- చివరగా, “getElementById()” పద్ధతి ఖాళీ పేరాను యాక్సెస్ చేస్తుంది మరియు “ని ఉపయోగించి లెక్కించిన CSS ఆస్తి విలువను ప్రదర్శిస్తుంది. అంతర్గత HTML ”ఆస్తి.
అవుట్‌పుట్
చూసినట్లుగా, అవుట్‌పుట్ అనువర్తిత ఫాంట్-సైజ్ విలువను సంబంధిత HTML మూలకం అంటే “
”కి వ్యతిరేకంగా ప్రదర్శిస్తుంది.
ఉదాహరణ 2: HTML మూలకం యొక్క నేపథ్య రంగును గణించడానికి “getComputedStyle()” పద్ధతిని వర్తింపజేయడం
ఈ ఉదాహరణలో, నిర్దిష్ట HTML మూలకం యొక్క నేపథ్య రంగును గణించడానికి చర్చించబడిన పద్ధతి ఉపయోగించబడుతుంది:
< స్క్రిప్ట్ >స్థిరంగా మూలకం = పత్రం. getElementById ( 'డెమో' ) ;
స్థిరంగా obj = కిటికీ. getComputedStyle ( మూలకం )
bgcolorని అనుమతించండి = obj ప్రాపర్టీ విలువ పొందండి ( 'నేపథ్య రంగు' ) ;
పత్రం. getElementById ( 'నమూనా' ) . అంతర్గత HTML = bgcolor ;
స్క్రిప్ట్ >
పై కోడ్ బ్లాక్‌లో, “ getComputedStyle() 'పద్ధతి 'ని గణిస్తుంది నేపథ్య రంగు '
' మూలకం యొక్క ఐడి 'డెమో' మరియు దాని విలువను 'rgb'గా తిరిగి ఇస్తుంది getPropertyValue() ” పద్ధతి.
అవుట్‌పుట్
అవుట్‌పుట్ పొందబడిన HTML మూలకం యొక్క కంప్యూటెడ్ బ్యాక్‌గ్రౌండ్ రంగును స్పష్టంగా చూపుతుంది.
ముగింపు
జావాస్క్రిప్ట్ అందిస్తుంది “ getComputedStyle() లక్ష్యం HTML మూలకం యొక్క CSS స్టైలింగ్ లక్షణాలను గణించే పద్ధతి. ఈ పద్ధతి యొక్క కంప్యూటెడ్ విలువ CSS లక్షణాలు మరియు వాటి విలువలను కలిగి ఉండే స్ట్రింగ్. ఏదైనా HTML మూలకం యొక్క CSS లక్షణాలను పొందడానికి JavaScriptను ఉపయోగించి ఇది వివిధ మార్గాల్లో అమలు చేయబడుతుంది. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లోని విండో ఆబ్జెక్ట్ యొక్క “getComputedStyle()” పద్ధతి యొక్క లక్ష్యం, పని మరియు వినియోగం యొక్క వివరణాత్మక వీక్షణను అందించింది.