ఈ గైడ్ జావాస్క్రిప్ట్‌లోని HTML DOM ఎలిమెంట్ “స్టైల్” ప్రాపర్టీ యొక్క లక్ష్యం మరియు పని గురించి వివరిస్తుంది.
HTML DOM ఎలిమెంట్ “స్టైల్” ప్రాపర్టీ జావాస్క్రిప్ట్‌లో ఎలా పని చేస్తుంది?
HTML DOM ' శైలి ” అనేది రీడ్-ఓన్లీ ప్రాపర్టీ, తదనుగుణంగా కేటాయించిన స్టైలింగ్ ప్రాపర్టీల ఆధారంగా పని చేస్తుంది. అలాగే, ఇది తిరిగి ఇస్తుంది “ CSSSస్టైల్ డిక్లరేషన్ ” నిర్దిష్ట HTML మూలకం యొక్క అన్ని ఇన్‌లైన్ శైలి లక్షణాలను కలిగి ఉన్న వస్తువు.
గమనిక: 'CSSStyleDeclaration' ఆబ్జెక్ట్ హెడ్ సెక్షన్‌లో నిర్వచించిన CSS స్టైలింగ్ లక్షణాలను కలిగి ఉంటుంది.
సింటాక్స్ (శైలి ప్రాపర్టీని సెట్ చేయండి)
మూలకం. శైలి . ఆస్తి = విలువపై వాక్యనిర్మాణం ప్రకారం, “ శైలి 'ఆస్తి ఒక పరామితికి మాత్రమే మద్దతు ఇస్తుంది' విలువ ” ఇది పేర్కొన్న స్టైలింగ్ ప్రాపర్టీ విలువను సూచిస్తుంది.
సింటాక్స్ (శైలి ప్రాపర్టీని తిరిగి ఇవ్వండి)
మూలకం. శైలి . ఆస్తిపైన చర్చించిన 'శైలి' ఆస్తి యొక్క వాక్యనిర్మాణాలను ఆచరణాత్మకంగా అమలు చేద్దాం.
ఉదాహరణ 1: నిర్దిష్ట HTML మూలకం యొక్క రంగును సెట్ చేయడానికి “శైలి” లక్షణాన్ని ఉపయోగించండి
ఈ ఉదాహరణ '' యొక్క ప్రాథమిక వాక్యనిర్మాణాన్ని వర్తిస్తుంది. శైలి 'స్టైల్' ప్రాపర్టీ యొక్క విలువను సెట్ చేయడానికి ప్రాపర్టీ అంటే నిర్దిష్ట HTML మూలకం యొక్క రంగు మార్చబడుతుంది.
HTML కోడ్
ముందుగా, ఇచ్చిన HTML కోడ్ ద్వారా వెళ్ళండి:
< h2 > JavaScriptలో స్టైల్ ప్రాపర్టీని ఉపయోగించండి h2 >
< h3 id = 'H3' > రెండవ ఉపశీర్షిక. h3 >
పై కోడ్ లైన్లలో:
- ది ' ” HTML ట్యాగ్ మొదటి ఉపశీర్షికను నిర్దేశిస్తుంది.
- ది ' ”ట్యాగ్ కేటాయించిన id “H3”తో స్థాయి 3 యొక్క రెండవ ఉపశీర్షికను సృష్టిస్తుంది.
జావాస్క్రిప్ట్ కోడ్
తరువాత, పేర్కొన్న జావాస్క్రిప్ట్ కోడ్‌ని అనుసరించండి:
< స్క్రిప్ట్ >పత్రం. getElementById ( 'H3' ) . శైలి . రంగు = 'ఆకుపచ్చ' ;
స్క్రిప్ట్ >
పై కోడ్ స్నిప్పెట్‌లో, “ document.getElementById() 'పద్ధతి చేర్చబడిన వాటిని యాక్సెస్ చేస్తుంది' 'మూలకం దాని ఐడి ద్వారా' H3 'నిర్దిష్ట సెట్ చేయడానికి' రంగు '' ద్వారా మూలకం యొక్క లక్షణం విలువ శైలి.రంగు ”ఆస్తి.
అవుట్‌పుట్
'స్టైల్' ప్రాపర్టీని ఉపయోగించి టార్గెటెడ్ HTML ఎలిమెంట్ విజువల్ రిప్రజెంటేషన్ సెట్ చేయబడిందని అవుట్‌పుట్ చూపిస్తుంది.
ఉదాహరణ 2: వర్తింపజేసిన “శైలి” లక్షణం యొక్క విలువను పొందడానికి “శైలి” లక్షణాన్ని ఉపయోగించండి
ఈ ఉదాహరణలో, “స్టైల్” ప్రాపర్టీ దాని సాధారణీకరించిన సింటాక్స్ (రిటర్న్ ఎ స్టైల్ ప్రాపర్టీ) ఉపయోగించి HTML మూలకం యొక్క కేటాయించిన “స్టైల్” లక్షణాన్ని కనుగొనడంలో సహాయపడుతుంది.
HTML కోడ్
HTML కోడ్ ఇక్కడ పేర్కొనబడింది:
< h2 > JavaScriptలో స్టైల్ ప్రాపర్టీని ఉపయోగించండి h2 >< h3 id = 'H3' శైలి = 'నేపథ్యం-రంగు:నారింజ;' > రెండవ ఉపశీర్షిక నేపథ్య రంగు విలువ : h3 >
< h4 id = 'డెమో' > h4 >
ఈ కోడ్‌లో:
- ది ' ” HTML ట్యాగ్ “
” HTML మూలకం యొక్క నేపథ్య రంగును సెట్ చేసే “శైలి” లక్షణాన్ని ఉపయోగిస్తుంది.
- ది ' 'ట్యాగ్ IDని కలిగి ఉన్న స్థాయి 4 యొక్క ఖాళీ ఉపశీర్షికను సృష్టిస్తుంది' డెమో ”.
జావాస్క్రిప్ట్ కోడ్
ఇప్పుడు, ఇచ్చిన జావాస్క్రిప్ట్ కోడ్‌ను చూడండి:
< స్క్రిప్ట్ >స్థిరంగా విలువ = పత్రం. getElementById ( 'H3' ) . శైలి . నేపథ్య రంగు ;
పత్రం. getElementById ( 'డెమో' ) . అంతర్గత HTML = విలువ ;
స్క్రిప్ట్ >
పైన వ్రాసిన కోడ్‌లో:
- వేరియబుల్ ' విలువ ''తో ప్రకటించబడింది స్థిరంగా ' వర్తించే కీవర్డ్ ' document.getElementById() '
' మూలకాన్ని దాని ఐడిని ఉపయోగించి పొందే పద్ధతి వర్తింపజేయబడిన “శైలి” లక్షణం యొక్క విలువను పొందడం మరియు దానిని మూలకం అంటే “
”కి “స్టైల్” ప్రాపర్టీ ద్వారా వర్తింపజేయడం.
- జోడించిన ఖాళీ “
” మూలకాన్ని యాక్సెస్ చేయడానికి “document.getElementById()” పద్ధతి మళ్లీ ఉపయోగించబడుతుంది మరియు పొందబడిన HTML ఎలిమెంట్‌కు వ్యతిరేకంగా కేటాయించిన “స్టైల్” లక్షణం యొక్క విలువను ప్రదర్శిస్తుంది మరియు దానిని “ ద్వారా ఉపశీర్షికగా చేర్చండి. అంతర్గత HTML ”ఆస్తి.
అవుట్‌పుట్
అవుట్‌పుట్ మూలకానికి నేపథ్య రంగును వర్తింపజేస్తుంది మరియు సెట్ “స్టైల్” అట్రిబ్యూట్ విలువ కూడా తదనుగుణంగా అందించబడుతుంది.
ముగింపు
జావాస్క్రిప్ట్ “ని ఉపయోగిస్తుంది శైలి HTML DOM మూలకం యొక్క ఇన్‌లైన్ “స్టైల్” లక్షణాలను కేటాయించడానికి మరియు తిరిగి ఇవ్వడానికి ఆస్తి. తదనుగుణంగా కావలసిన కార్యాచరణను వర్తింపజేయడానికి దీనికి అదనపు 'విలువ' అవసరం. సెట్ చేయడం మరియు తిరిగి పొందడం కాకుండా, ఇప్పటికే ఉన్న “శైలి” లక్షణాన్ని మార్చడం కూడా ప్రయోజనకరం. ఈ గైడ్ HTML DOM ఎలిమెంట్ స్టైల్ ప్రాపర్టీ యొక్క ప్రధాన లక్ష్యం, పని మరియు ఆచరణాత్మక అమలును ప్రదర్శించింది.