జావాస్క్రిప్ట్‌తో తరగతులను నవీకరిస్తోంది
HTML మూలకాలతో డైనమిక్‌గా పరస్పర చర్య చేయడానికి మరియు మార్చడానికి JavaScript శక్తివంతమైన సాధనాలను అందిస్తుంది. ఆన్‌క్లిక్ వంటి ఈవెంట్‌లకు ప్రతిస్పందనగా HTML మూలకం యొక్క తరగతిని మార్చడం ఒక సాధారణ పని.
ఈ గైడ్ మీ వెబ్ పేజీలలో డైనమిక్ స్టైలింగ్ మరియు ప్రవర్తన మార్పులను అనుమతించడం ద్వారా మూలకం యొక్క తరగతిని మార్చడానికి JavaScriptను ఎలా ఉపయోగించాలో ప్రదర్శిస్తుంది. మీరు ఒక బటన్ క్లిక్ లేదా మరొక ఈవెంట్‌కు ప్రతిస్పందించినా, ఈ పద్ధతులు మీ వెబ్ అభివృద్ధి నైపుణ్యాలను మెరుగుపరుస్తాయి.
| ఆదేశం | వివరణ |
|---|---|
| className | మూలకం యొక్క తరగతి లక్షణాన్ని సెట్ చేస్తుంది లేదా అందిస్తుంది. మూలకం యొక్క తరగతిని మార్చడానికి ఉపయోగించబడుతుంది. |
| getElementById | పేర్కొన్న విలువతో ID లక్షణాన్ని కలిగి ఉన్న మూలకాన్ని అందిస్తుంది. బటన్ మూలకాన్ని ఎంచుకోవడానికి ఉపయోగించబడుతుంది. |
| onclick | మూలకంపై క్లిక్ ఈవెంట్ సంభవించినప్పుడు అమలు చేయవలసిన ఫంక్షన్‌ను సెట్ చేస్తుంది. |
| removeClass | j క్వెరీలో ఎంచుకున్న మూలకాల నుండి ఒకటి లేదా అంతకంటే ఎక్కువ తరగతి పేర్లను తొలగిస్తుంది. |
| addClass | j క్వెరీలో ఎంచుకున్న మూలకాలకు ఒకటి లేదా అంతకంటే ఎక్కువ తరగతి పేర్లను జోడిస్తుంది. |
| $ | j క్వెరీకి మారుపేరు, ఎలిమెంట్‌లను ఎంచుకుని వాటిపై చర్యలను చేయడానికి ఉపయోగించబడుతుంది. |
జావాస్క్రిప్ట్ క్లాస్ మానిప్యులేషన్‌ను అర్థం చేసుకోవడం
అందించిన స్క్రిప్ట్‌లు క్లిక్ ఈవెంట్‌కు ప్రతిస్పందనగా జావాస్క్రిప్ట్ మరియు j క్వెరీని ఉపయోగించి HTML మూలకం యొక్క తరగతిని ఎలా మార్చాలో ప్రదర్శిస్తాయి. మొదటి స్క్రిప్ట్‌లో, ఈ కార్యాచరణను సాధించడానికి సాదా జావాస్క్రిప్ట్ ఉపయోగించబడుతుంది. ది getElementById ID 'myButton'తో బటన్ మూలకాన్ని ఎంచుకోవడానికి పద్ధతిని ఉపయోగించారు. ది onclick ఈవెంట్ ఈ మూలకానికి కేటాయించబడుతుంది, బటన్‌ను క్లిక్ చేసినప్పుడు అమలు చేయాల్సిన ఫంక్షన్‌ను పేర్కొంటుంది. ఈ ఫంక్షన్ లోపల, బటన్ className ప్రాపర్టీ 'మార్చబడింది'కి సెట్ చేయబడింది, దాని క్లాస్‌ని మరియు తదనంతరం CSSలో నిర్వచించిన విధంగా దాని శైలిని మారుస్తుంది. ఈ స్క్రిప్ట్ DOM మానిప్యులేషన్ కోసం సాదా జావాస్క్రిప్ట్‌ని ఉపయోగించడం యొక్క సరళత మరియు ప్రత్యక్షతను ప్రభావవంతంగా ప్రదర్శిస్తుంది.
రెండవ స్క్రిప్ట్ j క్వెరీని ఉపయోగించి అదే కార్యాచరణను వివరిస్తుంది, ఇది HTML డాక్యుమెంట్ ట్రావెర్సల్ మరియు మానిప్యులేషన్‌ను సులభతరం చేసే ప్రసిద్ధ జావాస్క్రిప్ట్ లైబ్రరీ. ఇక్కడ, j క్వెరీ అలియాస్ $ బటన్ మూలకాన్ని ఎంచుకోవడానికి ఉపయోగించబడుతుంది. ది click క్లిక్ ఈవెంట్ కోసం ఈవెంట్ హ్యాండ్లర్‌ను సెటప్ చేయడానికి పద్ధతి వర్తించబడుతుంది. ఈ హ్యాండ్లర్‌లో, బటన్ యొక్క క్లాస్ j క్వెరీని ఉపయోగించి సవరించబడుతుంది removeClass మరియు addClass పద్ధతులు. ఈ పద్ధతులు మూలకం యొక్క తరగతులను మార్చటానికి అనుకూలమైన మార్గాన్ని అందిస్తాయి, సాదా జావాస్క్రిప్ట్‌తో పోలిస్తే మరింత చదవగలిగే మరియు సంక్షిప్త విధానాన్ని అందిస్తాయి. వినియోగదారు పరస్పర చర్య ఆధారంగా మూలకం యొక్క తరగతిని డైనమిక్‌గా మార్చడం అనే ఒకే లక్ష్యాన్ని విభిన్న సాధనాలు ఎలా సాధించగలవో ప్రదర్శించడం రెండు స్క్రిప్ట్‌ల లక్ష్యం.
జావాస్క్రిప్ట్ ఉపయోగించి క్లిక్ చేయడంపై మూలకం యొక్క తరగతిని మార్చడం
జావాస్క్రిప్ట్ మరియు HTML
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
j క్వెరీని ఉపయోగించి HTML మూలకం యొక్క తరగతిని నవీకరిస్తోంది
j క్వెరీతో జావాస్క్రిప్ట్
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
జావాస్క్రిప్ట్‌లో క్లాస్ మానిప్యులేషన్ కోసం అధునాతన సాంకేతికతలు
ఈవెంట్‌లకు ప్రతిస్పందనగా ప్రాథమిక తరగతి మార్పులకు మించి, మూలకం యొక్క తరగతి జాబితాను మార్చడానికి JavaScript మరింత అధునాతన సాంకేతికతలను అందిస్తుంది. అటువంటి పద్ధతి ఒకటి classList ఆస్తి, ఇది తరగతులతో పని చేయడానికి మరింత సౌకర్యవంతమైన మరియు శక్తివంతమైన మార్గాన్ని అందిస్తుంది. ది classList ఆస్తి మూలకం యొక్క తరగతి లక్షణాల ప్రత్యక్ష DOMTokenList సేకరణను అందిస్తుంది. ఉపయోగించి classList, మీరు మూలకానికి వర్తించే ఇతర తరగతులను ప్రభావితం చేయకుండా తరగతులను జోడించవచ్చు, తీసివేయవచ్చు, టోగుల్ చేయవచ్చు మరియు తనిఖీ చేయవచ్చు.
ఉదాహరణకు, ది add ఒక మూలకానికి ఒకటి లేదా అంతకంటే ఎక్కువ తరగతులను జోడించడానికి పద్ధతిని ఉపయోగించవచ్చు, అయితే remove పద్ధతి ఒకటి లేదా అంతకంటే ఎక్కువ పేర్కొన్న తరగతులను తీసివేయగలదు. ది toggle ఈ పద్ధతి చాలా ఉపయోగకరంగా ఉంటుంది, ఎందుకంటే అది ఉనికిలో లేనట్లయితే తరగతిని జోడిస్తుంది మరియు అది ఉంటే దాన్ని తీసివేస్తుంది, డార్క్ మోడ్ టోగుల్‌లను అమలు చేయడం వంటి పనులకు ఇది ఆదర్శవంతంగా చేస్తుంది. అదనంగా, ది contains మూలకం నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో పద్ధతి తనిఖీ చేస్తుంది, ఇది ఒక మూలకం యొక్క ప్రస్తుత స్థితి ఆధారంగా షరతులు లేదా ప్రవర్తనలను షరతులతో వర్తింపజేయడానికి ఉపయోగపడుతుంది.
జావాస్క్రిప్ట్ క్లాస్ మానిప్యులేషన్ గురించి తరచుగా అడిగే ప్రశ్నలు
- నేను ఒక మూలకానికి బహుళ తరగతులను ఎలా జోడించగలను?
- ఉపయోగించడానికి classList.add బహుళ వాదనలతో పద్ధతి: element.classList.add('class1', 'class2').
- నేను ఒక మూలకం నుండి అన్ని తరగతులను తీసివేయవచ్చా?
- అవును, మీరు ఉపయోగించవచ్చు className ఆస్తి మరియు దానిని ఖాళీ స్ట్రింగ్‌కు సెట్ చేయండి: element.className = ''.
- రెండింటిలో తేడా ఏంటి className మరియు classList?
- className మొత్తం తరగతి లక్షణాన్ని సెట్ చేస్తుంది లేదా పొందుతుంది, అయితే classList తరగతుల యొక్క మరింత గ్రాన్యులర్ తారుమారుని అనుమతిస్తుంది.
- మూలకం నిర్దిష్ట తరగతిని కలిగి ఉందో లేదో నేను ఎలా తనిఖీ చేయాలి?
- ఉపయోగించడానికి classList.contains పద్ధతి: element.classList.contains('classname').
- ఎలిమెంట్‌పై క్లాస్‌ని ఎలా టోగుల్ చేయాలి?
- ఉపయోగించడానికి classList.toggle పద్ధతి: element.classList.toggle('classname').
- తరగతులను మార్చేందుకు నేను j క్వెరీని ఉపయోగించవచ్చా?
- అవును, j క్వెరీ వంటి పద్ధతులను అందిస్తుంది addClass, removeClass, మరియు toggleClass.
- ప్రత్యక్ష DOMTokenList అంటే ఏమిటి?
- ఎ DOMTokenList మూలకం యొక్క తరగతి లక్షణం మారినప్పుడు స్వయంచాలకంగా నవీకరించబడే ప్రత్యక్ష సేకరణ.
- ఉంది classList అన్ని బ్రౌజర్‌లలో మద్దతు ఉందా?
- classList అన్ని ఆధునిక బ్రౌజర్‌లలో మద్దతు ఉంది, అయితే ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ యొక్క పాత సంస్కరణలు దీనికి పూర్తిగా మద్దతు ఇవ్వకపోవచ్చు.
- నేను షరతుల ఆధారంగా తరగతులను డైనమిక్‌గా ఎలా జోడించగలను?
- మీరు ఉపయోగించవచ్చు if కలిపి ప్రకటనలు classList.add లేదా classList.remove షరతులతో తరగతులను వర్తింపజేయడానికి.
డైనమిక్ క్లాస్ మార్పుల కోసం కీలక పద్ధతులు
అందించిన స్క్రిప్ట్‌లు క్లిక్ ఈవెంట్‌కు ప్రతిస్పందనగా JavaScript మరియు j క్వెరీని ఉపయోగించి HTML మూలకం యొక్క తరగతిని ఎలా మార్చాలో ప్రదర్శిస్తాయి. మొదటి స్క్రిప్ట్‌లో, ఈ కార్యాచరణను సాధించడానికి సాదా జావాస్క్రిప్ట్ ఉపయోగించబడుతుంది. ది getElementById ID 'myButton'తో బటన్ మూలకాన్ని ఎంచుకోవడానికి పద్ధతిని ఉపయోగించారు. ది onclick ఈవెంట్ ఈ మూలకానికి కేటాయించబడుతుంది, బటన్‌ను క్లిక్ చేసినప్పుడు అమలు చేయాల్సిన ఫంక్షన్‌ను పేర్కొంటుంది. ఈ ఫంక్షన్ లోపల, బటన్ className ప్రాపర్టీ 'మార్చబడింది'కి సెట్ చేయబడింది, దాని క్లాస్‌ని మరియు తదనంతరం CSSలో నిర్వచించిన విధంగా దాని శైలిని మారుస్తుంది. ఈ స్క్రిప్ట్ DOM మానిప్యులేషన్ కోసం సాదా జావాస్క్రిప్ట్‌ని ఉపయోగించడం యొక్క సరళత మరియు ప్రత్యక్షతను ప్రభావవంతంగా ప్రదర్శిస్తుంది.
రెండవ స్క్రిప్ట్ j క్వెరీని ఉపయోగించి అదే కార్యాచరణను వివరిస్తుంది, ఇది HTML డాక్యుమెంట్ ట్రావెర్సల్ మరియు మానిప్యులేషన్‌ను సులభతరం చేసే ప్రసిద్ధ జావాస్క్రిప్ట్ లైబ్రరీ. ఇక్కడ, j క్వెరీ అలియాస్ $ బటన్ మూలకాన్ని ఎంచుకోవడానికి ఉపయోగించబడుతుంది. ది click క్లిక్ ఈవెంట్ కోసం ఈవెంట్ హ్యాండ్లర్‌ను సెటప్ చేయడానికి పద్ధతి వర్తించబడుతుంది. ఈ హ్యాండ్లర్‌లో, బటన్ యొక్క క్లాస్ j క్వెరీని ఉపయోగించి సవరించబడుతుంది removeClass మరియు addClass పద్ధతులు. ఈ పద్ధతులు మూలకం యొక్క తరగతులను మార్చటానికి అనుకూలమైన మార్గాన్ని అందిస్తాయి, సాదా జావాస్క్రిప్ట్‌తో పోలిస్తే మరింత చదవగలిగే మరియు సంక్షిప్త విధానాన్ని అందిస్తాయి. వినియోగదారు పరస్పర చర్య ఆధారంగా మూలకం యొక్క తరగతిని డైనమిక్‌గా మార్చడం అనే ఒకే లక్ష్యాన్ని విభిన్న సాధనాలు ఎలా సాధించవచ్చో ప్రదర్శించడం రెండు స్క్రిప్ట్‌ల లక్ష్యం.
కీ పాయింట్లను సంగ్రహించడం
JavaScript లేదా j క్వెరీని ఉపయోగించి HTML మూలకం యొక్క తరగతిని మార్చడం అనేది మూలకం యొక్క స్టైలింగ్ మరియు ప్రవర్తనను డైనమిక్‌గా నవీకరించడానికి సరళమైన మార్గాన్ని అందిస్తుంది. వంటి పద్ధతులను అర్థం చేసుకోవడం మరియు ఉపయోగించడం ద్వారా className, classList, మరియు j క్వెరీ యొక్క క్లాస్ మానిప్యులేషన్ పద్ధతులు, డెవలపర్‌లు తమ వెబ్ పేజీల యొక్క ఇంటరాక్టివిటీ మరియు ప్రతిస్పందనను మెరుగుపరచగలరు, తద్వారా వాటిని వినియోగదారులకు మరింత ఆకర్షణీయంగా చేయవచ్చు.