ఈ మాన్యువల్ జావాస్క్రిప్ట్‌లో సక్రియ తరగతిని జోడించే విధానాన్ని వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో యాక్టివ్ క్లాస్‌ని ఎలా జోడించాలి?
సక్రియ తరగతిని జోడించడానికి, మేము ఈ క్రింది పద్ధతులను ఉపయోగిస్తాము:
మొదటి పద్ధతికి వెళ్దాం!
విధానం 1: జావాస్క్రిప్ట్‌లో యాక్టివ్ క్లాస్‌ని జోడించడానికి document.getElementById()ని classList.add() పద్ధతిని ఉపయోగించండి
జావాస్క్రిప్ట్‌లో, ' document.getElementById() ” పద్ధతి దాని id ద్వారా నిర్దిష్ట మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది. అయినప్పటికీ, ఇది వాటి ఐడిల ఆధారంగా ఎలిమెంట్‌లను మాత్రమే ఎంచుకుంటుంది, తరగతులు కాదు. మీరు దీన్ని 'తో ఉపయోగించవచ్చు classList.add() ” జావాస్క్రిప్ట్‌లో సక్రియ తరగతిని జోడించే పద్ధతి.
ఒక ఉదాహరణ తీసుకొని ఈ పద్ధతిని అన్వేషిద్దాం.
ఉదాహరణ
మా HTML ఫైల్‌లో, మేము ' 'కొంత వచనంతో ట్యాగ్ చేయండి, దాని ఐడిని ఇలా పేర్కొనండి' పదము ”, మరియు జోడించు “ క్లిక్ చేయండి 'ప్రేరేపిస్తుంది' ఈవెంట్ యాక్టివేట్ () ” ఫంక్షన్.
ట్యాగ్లోట్యాగ్ని జోడించడం గమనించండి:
< p id = 'పదము' క్లిక్ చేయండి = 'సక్రియం చేయి()' > ఇక్కడ నొక్కండి p >JavaScript ఫైల్‌లో, డాక్యుమెంట్.getElementbyId() పద్ధతిలో దాని ఐడిని ఉపయోగించి పేరాగ్రాఫ్ ఎలిమెంట్‌ను మొదట యాక్సెస్ చేసే విధంగా యాక్టివేట్() ఫంక్షన్‌ని నిర్వచించండి. ఆపై, స్టైలింగ్ ప్రయోజనాల కోసం దాని తరగతి జాబితాకు CSS తరగతిని జోడించండి:
ఫంక్షన్ యాక్టివేట్ ( ) {
అక్కడ ఒక = పత్రం. getElementById ( 'పదము' ) ;
a. తరగతి జాబితా . జోడించు ( 'కొత్త తరగతి' ) ;
}
CSS ఫైల్‌లో, ' ముందు డాట్ ఉంచండి కొత్తతరగతి 'మరియు' కేటాయించండి నేపథ్య రంగు 'ఆస్తి ఒక విలువ' నారింజ ”:
. కొత్తతరగతి {నేపథ్య - రంగు : నారింజ ;
}
ఫలితంగా, మీరు పేరా మూలకంపై క్లిక్ చేసినప్పుడు, జోడించిన నేపథ్య ఆస్తి దానికి వర్తించబడుతుంది:
క్రియాశీల తరగతిని జోడించడానికి డాక్యుమెంట్.querySelector()ని ఉపయోగించే క్రింది పద్ధతిని చూద్దాం.
విధానం 2: జావాస్క్రిప్ట్‌లో యాక్టివ్ క్లాస్‌ని జోడించడానికి document.querySelector()ని classList.add() పద్ధతితో ఉపయోగించండి
జావాస్క్రిప్ట్‌లో, ' document.querySelector() కోడ్ నుండి మొదటి మూలకాన్ని పొందడానికి ” పద్ధతి ఉపయోగించబడుతుంది. మీరు querySelector() పద్ధతిలో తరగతులు మరియు idలు రెండింటినీ పేర్కొనవచ్చు. దీనిని 'తో ఉపయోగించవచ్చు classList.add() ” జావాస్క్రిప్ట్‌లో సక్రియ తరగతిని జోడించే పద్ధతి.
ఉదాహరణ
మేము ఇప్పుడు 'ని మాత్రమే ఉపయోగిస్తాము document.querySelector() 'ఐడితో' #పదము ”పేరాగ్రాఫ్ మూలకాన్ని ఎంచుకోవడానికి. మళ్ళీ, యాక్టివ్‌ని జోడించడానికి classList.add() పద్ధతి ఉపయోగించబడుతుంది కొత్తతరగతి ”:
ఫంక్షన్ యాక్టివేట్ ( ) {అక్కడ ఒక = పత్రం. querySelector ( '#పదము' ) ;
a. తరగతి జాబితా . జోడించు ( 'కొత్త తరగతి' ) ;
}
అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో సక్రియ తరగతిని జోడించడానికి మేము రెండు సరళమైన పద్ధతులను నేర్చుకున్నాము
ముగింపు
సక్రియ తరగతిని జోడించడానికి, మేము “ని ఉపయోగించవచ్చు getElementById() 'లేదా' క్వెరీసెలెక్టర్() ” classList.add() పద్ధతితో. పేర్కొన్న రెండు పద్ధతులు ముందుగా వాటి ఐడి ద్వారా ఎలిమెంట్‌లను పొందుతాయి, ఆపై classList.add() పద్ధతిని ఉపయోగించి, స్టైలింగ్ ప్రయోజనాల కోసం ఉపయోగించగల మూలకానికి కొత్త తరగతి పేరు కేటాయించబడుతుంది. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో సక్రియ తరగతిని జోడించడానికి సంబంధించిన విధానాన్ని వివరించింది.