JavaScript સાથે વર્ગો અપડેટ કરી રહ્યાં છીએ
JavaScript HTML તત્વો સાથે ગતિશીલ રીતે ક્રિયાપ્રતિક્રિયા કરવા અને તેની સાથે ચાલાકી કરવા માટે શક્તિશાળી સાધનો પ્રદાન કરે છે. એક સામાન્ય કાર્ય ઓનક્લિક જેવી ઘટનાઓના પ્રતિભાવમાં HTML તત્વના વર્ગને બદલવાનું છે.
આ માર્ગદર્શિકા એલિમેન્ટના વર્ગને બદલવા માટે JavaScriptનો ઉપયોગ કેવી રીતે કરવો તે દર્શાવશે, તમારા વેબ પૃષ્ઠો પર ગતિશીલ શૈલી અને વર્તન ફેરફારો માટે પરવાનગી આપે છે. ભલે તમે બટન ક્લિક અથવા અન્ય ઇવેન્ટનો પ્રતિસાદ આપી રહ્યાં હોવ, આ તકનીકો તમારી વેબ ડેવલપમેન્ટ કુશળતાને વધારશે.
| આદેશ | વર્ણન |
|---|---|
| className | એલિમેન્ટની ક્લાસ એટ્રિબ્યુટ સેટ કરે છે અથવા પરત કરે છે. તત્વના વર્ગને બદલવા માટે વપરાય છે. |
| getElementById | ઉલ્લેખિત મૂલ્ય સાથે ID વિશેષતા ધરાવતું ઘટક પરત કરે છે. બટન તત્વ પસંદ કરવા માટે વપરાય છે. |
| onclick | જ્યારે તત્વ પર ક્લિક ઇવેન્ટ થાય ત્યારે કાર્યને અમલમાં મૂકવા માટે સેટ કરે છે. |
| removeClass | jQuery માં પસંદ કરેલ ઘટકોમાંથી એક અથવા વધુ વર્ગના નામો દૂર કરે છે. |
| addClass | jQuery માં પસંદ કરેલ ઘટકોમાં એક અથવા વધુ વર્ગના નામ ઉમેરે છે. |
| $ | jQuery માટે ઉપનામ, તત્વો પસંદ કરવા અને તેમના પર ક્રિયાઓ કરવા માટે વપરાય છે. |
JavaScript ક્લાસ મેનીપ્યુલેશનને સમજવું
પૂરી પાડવામાં આવેલ સ્ક્રિપ્ટો દર્શાવે છે કે ક્લિક ઇવેન્ટના પ્રતિભાવમાં JavaScript અને jQuery નો ઉપયોગ કરીને HTML ઘટકનો વર્ગ કેવી રીતે બદલવો. પ્રથમ સ્ક્રિપ્ટમાં, આ કાર્યક્ષમતા પ્રાપ્ત કરવા માટે સાદી જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવામાં આવે છે. આ getElementById ID 'myButton' સાથે બટન તત્વ પસંદ કરવા માટે પદ્ધતિનો ઉપયોગ કરવામાં આવે છે. આ onclick પછી આ ઘટકને ઇવેન્ટ અસાઇન કરવામાં આવે છે, જ્યારે બટન ક્લિક કરવામાં આવે ત્યારે એક્ઝિક્યુટ કરવાના ફંક્શનનો ઉલ્લેખ કરે છે. આ કાર્યની અંદર, બટનનું className મિલકત 'બદલેલી' પર સેટ છે, તેના વર્ગમાં ફેરફાર કરીને અને ત્યારબાદ તેની શૈલી CSS માં વ્યાખ્યાયિત કરવામાં આવી છે. આ સ્ક્રિપ્ટ અસરકારક રીતે DOM મેનીપ્યુલેશન માટે સાદા JavaScript નો ઉપયોગ કરવાની સરળતા અને સીધીતા દર્શાવે છે.
બીજી સ્ક્રિપ્ટ jQuery નો ઉપયોગ કરીને સમાન કાર્યક્ષમતાને સમજાવે છે, જે એક લોકપ્રિય JavaScript લાઇબ્રેરી છે જે HTML ડોક્યુમેન્ટ ટ્રાવર્સલ અને મેનીપ્યુલેશનને સરળ બનાવે છે. અહીં, jQuery ઉપનામ $ બટન તત્વ પસંદ કરવા માટે વપરાય છે. આ click પછી ક્લિક ઇવેન્ટ માટે ઇવેન્ટ હેન્ડલર સેટ કરવા માટે પદ્ધતિ લાગુ કરવામાં આવે છે. આ હેન્ડલરની અંદર, બટનનો વર્ગ jQuery નો ઉપયોગ કરીને સુધારેલ છે removeClass અને addClass પદ્ધતિઓ આ પદ્ધતિઓ સાદા JavaScript ની તુલનામાં વધુ વાંચી શકાય તેવા અને સંક્ષિપ્ત અભિગમની ઓફર કરીને, તત્વના વર્ગોમાં ચાલાકી કરવાની અનુકૂળ રીત પ્રદાન કરે છે. બંને સ્ક્રિપ્ટનો હેતુ એ દર્શાવવાનો છે કે કેવી રીતે વિવિધ સાધનો વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાના આધારે તત્વના વર્ગને ગતિશીલ રીતે બદલવાના સમાન લક્ષ્યને પ્રાપ્ત કરી શકે છે.
JavaScript નો ઉપયોગ કરીને ક્લિક પર એલિમેન્ટનો વર્ગ બદલવો
JavaScript અને 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>
jQuery નો ઉપયોગ કરીને HTML એલિમેન્ટના વર્ગને અપડેટ કરવું
jQuery સાથે JavaScript
// 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 માં વર્ગ મેનીપ્યુલેશન માટે અદ્યતન તકનીકો
ઇવેન્ટ્સના પ્રતિભાવમાં મૂળભૂત વર્ગના ફેરફારો ઉપરાંત, JavaScript એલિમેન્ટની ક્લાસ સૂચિની હેરફેર કરવા માટે વધુ અદ્યતન તકનીકો પ્રદાન કરે છે. આવી એક પદ્ધતિ છે classList મિલકત, જે વર્ગો સાથે કામ કરવાની વધુ લવચીક અને શક્તિશાળી રીત પ્રદાન કરે છે. આ classList મિલકત તત્વના વર્ગ વિશેષતાઓનો જીવંત DOMTokenList સંગ્રહ પરત કરે છે. ઉપયોગ કરીને classList, તમે એલિમેન્ટ પર લાગુ થઈ શકે તેવા અન્ય વર્ગોને અસર કર્યા વિના વર્ગો ઉમેરી, દૂર, ટૉગલ અને ચેક કરી શકો છો.
દાખલા તરીકે, ધ add પદ્ધતિનો ઉપયોગ તત્વમાં એક અથવા વધુ વર્ગો ઉમેરવા માટે થઈ શકે છે, જ્યારે remove પદ્ધતિ એક અથવા વધુ ઉલ્લેખિત વર્ગોને દૂર કરી શકે છે. આ toggle પદ્ધતિ ખાસ કરીને ઉપયોગી છે કારણ કે જો તે અસ્તિત્વમાં ન હોય તો તે વર્ગ ઉમેરે છે અને જો તે હોય તો તેને દૂર કરે છે, તેને ડાર્ક મોડ ટૉગલ્સને અમલમાં મૂકવા જેવા કાર્યો માટે આદર્શ બનાવે છે. વધુમાં, ધ contains પદ્ધતિ તપાસે છે કે તત્વમાં ચોક્કસ વર્ગ છે કે નહીં, જે તત્વની વર્તમાન સ્થિતિના આધારે શરતી રીતે શૈલીઓ અથવા વર્તન લાગુ કરવા માટે ઉપયોગી થઈ શકે છે.
JavaScript ક્લાસ મેનીપ્યુલેશન વિશે વારંવાર પૂછાતા પ્રશ્નો
- હું એક તત્વમાં બહુવિધ વર્ગો કેવી રીતે ઉમેરી શકું?
- નો ઉપયોગ કરો 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').
- શું હું વર્ગોમાં ચાલાકી કરવા માટે jQuery નો ઉપયોગ કરી શકું?
- હા, jQuery જેવી પદ્ધતિઓ પ્રદાન કરે છે addClass, removeClass, અને toggleClass.
- જીવંત DOMTokenList શું છે?
- એ DOMTokenList એ એક જીવંત સંગ્રહ છે જે જ્યારે તત્વની વર્ગ વિશેષતા બદલાય છે ત્યારે આપમેળે અપડેટ થાય છે.
- છે classList બધા બ્રાઉઝર્સમાં સપોર્ટેડ છે?
- classList તમામ આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે, પરંતુ ઇન્ટરનેટ એક્સપ્લોરરના જૂના વર્ઝન તેને સંપૂર્ણ રીતે સપોર્ટ કરતું નથી.
- શરતોના આધારે હું ગતિશીલ રીતે વર્ગો કેવી રીતે ઉમેરી શકું?
- તમે ઉપયોગ કરી શકો છો if સાથે સંયોજનમાં નિવેદનો classList.add અથવા classList.remove શરતી વર્ગો લાગુ કરવા.
ગતિશીલ વર્ગના ફેરફારો માટેની મુખ્ય તકનીકો
પૂરી પાડવામાં આવેલ સ્ક્રિપ્ટો દર્શાવે છે કે ક્લિક ઇવેન્ટના પ્રતિભાવમાં JavaScript અને jQuery નો ઉપયોગ કરીને HTML ઘટકનો વર્ગ કેવી રીતે બદલવો. પ્રથમ સ્ક્રિપ્ટમાં, આ કાર્યક્ષમતા પ્રાપ્ત કરવા માટે સાદી જાવાસ્ક્રિપ્ટનો ઉપયોગ કરવામાં આવે છે. આ getElementById ID 'myButton' સાથે બટન તત્વ પસંદ કરવા માટે પદ્ધતિનો ઉપયોગ કરવામાં આવે છે. આ onclick પછી આ ઘટકને ઇવેન્ટ અસાઇન કરવામાં આવે છે, જ્યારે બટન ક્લિક કરવામાં આવે ત્યારે એક્ઝિક્યુટ કરવાના ફંક્શનનો ઉલ્લેખ કરે છે. આ કાર્યની અંદર, બટનનું className મિલકત 'બદલેલી' પર સેટ છે, તેના વર્ગમાં ફેરફાર કરીને અને ત્યારબાદ તેની શૈલી CSS માં વ્યાખ્યાયિત કરવામાં આવી છે. આ સ્ક્રિપ્ટ અસરકારક રીતે DOM મેનીપ્યુલેશન માટે સાદા JavaScript નો ઉપયોગ કરવાની સરળતા અને સીધીતા દર્શાવે છે.
બીજી સ્ક્રિપ્ટ jQuery નો ઉપયોગ કરીને સમાન કાર્યક્ષમતાને સમજાવે છે, જે એક લોકપ્રિય JavaScript લાઇબ્રેરી છે જે HTML ડોક્યુમેન્ટ ટ્રાવર્સલ અને મેનીપ્યુલેશનને સરળ બનાવે છે. અહીં, jQuery ઉપનામ $ બટન તત્વ પસંદ કરવા માટે વપરાય છે. આ click પછી ક્લિક ઇવેન્ટ માટે ઇવેન્ટ હેન્ડલર સેટ કરવા માટે પદ્ધતિ લાગુ કરવામાં આવે છે. આ હેન્ડલરની અંદર, બટનનો વર્ગ jQuery નો ઉપયોગ કરીને સુધારેલ છે removeClass અને addClass પદ્ધતિઓ આ પદ્ધતિઓ સાદા JavaScript ની તુલનામાં વધુ વાંચી શકાય તેવા અને સંક્ષિપ્ત અભિગમની ઓફર કરીને, તત્વના વર્ગોમાં ચાલાકી કરવાની અનુકૂળ રીત પ્રદાન કરે છે. બંને સ્ક્રિપ્ટનો હેતુ એ દર્શાવવાનો છે કે કેવી રીતે જુદા જુદા ટૂલ્સ વપરાશકર્તાની ક્રિયાપ્રતિક્રિયાના આધારે તત્વના વર્ગને ગતિશીલ રીતે બદલવાનો સમાન ધ્યેય હાંસલ કરી શકે છે.
મુખ્ય મુદ્દાઓનો સારાંશ
JavaScript અથવા jQuery નો ઉપયોગ કરીને HTML એલિમેન્ટના વર્ગમાં હેરફેર કરવાથી એલિમેન્ટની સ્ટાઇલ અને વર્તણૂકને ગતિશીલ રીતે અપડેટ કરવાની સરળ રીત મળે છે. જેવી પદ્ધતિઓને સમજીને અને તેનો ઉપયોગ કરીને className, classList, અને jQuery ની ક્લાસ મેનીપ્યુલેશન પદ્ધતિઓ, વિકાસકર્તાઓ તેમના વેબ પૃષ્ઠોની ક્રિયાપ્રતિક્રિયા અને પ્રતિભાવને વધારી શકે છે, તેમને વપરાશકર્તાઓ માટે વધુ આકર્ષક બનાવે છે.