ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ക്ലാസുകൾ അപ്ഡേറ്റ് ചെയ്യുന്നു
HTML ഘടകങ്ങളുമായി ചലനാത്മകമായി സംവദിക്കാനും കൈകാര്യം ചെയ്യാനും JavaScript ശക്തമായ ടൂളുകൾ നൽകുന്നു. ഓൺക്ലിക്ക് പോലുള്ള ഇവൻ്റുകളോടുള്ള പ്രതികരണമായി ഒരു HTML എലമെൻ്റിൻ്റെ ക്ലാസ് മാറ്റുക എന്നതാണ് ഒരു പൊതു ചുമതല.
ഒരു എലമെൻ്റിൻ്റെ ക്ലാസ് മാറ്റാൻ JavaScript എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഈ ഗൈഡ് കാണിക്കും, നിങ്ങളുടെ വെബ് പേജുകളിൽ ഡൈനാമിക് സ്റ്റൈലിംഗും പെരുമാറ്റ മാറ്റങ്ങളും അനുവദിക്കുന്നു. നിങ്ങൾ ഒരു ബട്ടൺ ക്ലിക്കിലേക്കോ മറ്റൊരു ഇവൻ്റിലേക്കോ പ്രതികരിക്കുകയാണെങ്കിലും, ഈ സാങ്കേതിക വിദ്യകൾ നിങ്ങളുടെ വെബ് ഡെവലപ്മെൻ്റ് കഴിവുകൾ വർദ്ധിപ്പിക്കും.
കമാൻഡ് | വിവരണം |
---|---|
className | ഒരു ഘടകത്തിൻ്റെ ക്ലാസ് ആട്രിബ്യൂട്ട് സജ്ജീകരിക്കുകയോ നൽകുകയോ ചെയ്യുന്നു. മൂലകത്തിൻ്റെ ക്ലാസ് മാറ്റാൻ ഉപയോഗിക്കുന്നു. |
getElementById | നിർദ്ദിഷ്ട മൂല്യമുള്ള ഐഡി ആട്രിബ്യൂട്ട് ഉള്ള ഘടകം നൽകുന്നു. ബട്ടൺ ഘടകം തിരഞ്ഞെടുക്കാൻ ഉപയോഗിക്കുന്നു. |
onclick | എലമെൻ്റിൽ ഒരു ക്ലിക്ക് ഇവൻ്റ് സംഭവിക്കുമ്പോൾ എക്സിക്യൂട്ട് ചെയ്യേണ്ട ഫംഗ്ഷൻ സജ്ജമാക്കുന്നു. |
removeClass | jQuery-യിലെ തിരഞ്ഞെടുത്ത ഘടകങ്ങളിൽ നിന്ന് ഒന്നോ അതിലധികമോ ക്ലാസ് പേരുകൾ നീക്കം ചെയ്യുന്നു. |
addClass | jQuery-ൽ തിരഞ്ഞെടുത്ത ഘടകങ്ങളിലേക്ക് ഒന്നോ അതിലധികമോ ക്ലാസ് പേരുകൾ ചേർക്കുന്നു. |
$ | jQuery-യുടെ അപരനാമം, ഘടകങ്ങൾ തിരഞ്ഞെടുത്ത് അവയിൽ പ്രവർത്തനങ്ങൾ നടത്തുന്നതിന് ഉപയോഗിക്കുന്നു. |
JavaScript ക്ലാസ് കൃത്രിമത്വം മനസ്സിലാക്കുന്നു
ഒരു ക്ലിക്ക് ഇവൻ്റിന് മറുപടിയായി JavaScript, jQuery എന്നിവ ഉപയോഗിച്ച് ഒരു HTML എലമെൻ്റിൻ്റെ ക്ലാസ് എങ്ങനെ മാറ്റാമെന്ന് നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ കാണിക്കുന്നു. ആദ്യ സ്ക്രിപ്റ്റിൽ, ഈ പ്രവർത്തനക്ഷമത കൈവരിക്കാൻ പ്ലെയിൻ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു. ദി getElementById 'myButton' എന്ന ഐഡി ഉള്ള ബട്ടൺ എലമെൻ്റ് തിരഞ്ഞെടുക്കാൻ രീതി ഉപയോഗിക്കുന്നു. ദി onclick ഈ ഘടകത്തിലേക്ക് ഇവൻ്റ് അസൈൻ ചെയ്തിരിക്കുന്നു, ബട്ടൺ ക്ലിക്ക് ചെയ്യുമ്പോൾ എക്സിക്യൂട്ട് ചെയ്യേണ്ട ഫംഗ്ഷൻ വ്യക്തമാക്കുന്നു. ഈ പ്രവർത്തനത്തിനുള്ളിൽ, ബട്ടണിൻ്റെ className പ്രോപ്പർട്ടി 'മാറ്റം' ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിൻ്റെ ക്ലാസും തുടർന്ന് CSS-ൽ നിർവചിച്ചിരിക്കുന്ന ശൈലിയും മാറ്റുന്നു. DOM കൃത്രിമത്വത്തിനായി പ്ലെയിൻ JavaScript ഉപയോഗിക്കുന്നതിൻ്റെ ലാളിത്യവും നേരിട്ടുള്ളതയും ഈ സ്ക്രിപ്റ്റ് ഫലപ്രദമായി കാണിക്കുന്നു.
HTML ഡോക്യുമെൻ്റ് ട്രാവേഴ്സലും കൃത്രിമത്വവും ലളിതമാക്കുന്ന ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ jQuery ഉപയോഗിച്ചുള്ള അതേ പ്രവർത്തനം രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് ചിത്രീകരിക്കുന്നു. ഇവിടെ, jQuery അപരനാമം $ ബട്ടൺ ഘടകം തിരഞ്ഞെടുക്കാൻ ഉപയോഗിക്കുന്നു. ദി click ക്ലിക്ക് ഇവൻ്റിന് ഒരു ഇവൻ്റ് ഹാൻഡ്ലർ സജ്ജീകരിക്കാൻ രീതി പിന്നീട് പ്രയോഗിക്കുന്നു. ഈ ഹാൻഡ്ലറിനുള്ളിൽ, jQuery's ഉപയോഗിച്ച് ബട്ടണിൻ്റെ ക്ലാസ് പരിഷ്ക്കരിക്കുന്നു removeClass ഒപ്പം addClass രീതികൾ. പ്ലെയിൻ ജാവാസ്ക്രിപ്റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ കൂടുതൽ വായിക്കാവുന്നതും സംക്ഷിപ്തവുമായ സമീപനം വാഗ്ദാനം ചെയ്യുന്ന ഈ രീതികൾ മൂലകത്തിൻ്റെ ക്ലാസുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള സൗകര്യപ്രദമായ മാർഗം നൽകുന്നു. ഉപയോക്തൃ ഇടപെടലിനെ അടിസ്ഥാനമാക്കി ഒരു എലമെൻ്റിൻ്റെ ക്ലാസ് ചലനാത്മകമായി മാറ്റുക എന്ന ഒരേ ലക്ഷ്യം വ്യത്യസ്ത ടൂളുകൾക്ക് എങ്ങനെ നേടാനാകുമെന്ന് തെളിയിക്കാൻ രണ്ട് സ്ക്രിപ്റ്റുകളും ലക്ഷ്യമിടുന്നു.
ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്ന ക്ലിക്ക് എന്നതിൽ എലമെൻ്റിൻ്റെ ക്ലാസ് മാറ്റുന്നു
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 ഉള്ള ജാവാസ്ക്രിപ്റ്റ്
// 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 മൂലകത്തിൽ ഒരു നിർദ്ദിഷ്ട ക്ലാസ് അടങ്ങിയിട്ടുണ്ടോ എന്ന് രീതി പരിശോധിക്കുന്നു, അത് ഒരു മൂലകത്തിൻ്റെ നിലവിലെ അവസ്ഥയെ അടിസ്ഥാനമാക്കി സോപാധികമായി ശൈലികളോ പെരുമാറ്റങ്ങളോ പ്രയോഗിക്കുന്നതിന് ഉപയോഗപ്രദമാകും.
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 എല്ലാ ആധുനിക ബ്രൗസറുകളിലും പിന്തുണയ്ക്കുന്നു, എന്നാൽ Internet Explorer-ൻ്റെ പഴയ പതിപ്പുകൾ ഇതിനെ പൂർണ്ണമായി പിന്തുണച്ചേക്കില്ല.
- വ്യവസ്ഥകളെ അടിസ്ഥാനമാക്കി എനിക്ക് എങ്ങനെ ചലനാത്മകമായി ക്ലാസുകൾ ചേർക്കാനാകും?
- നിങ്ങൾക്ക് ഉപയോഗിക്കാം if എന്നിവയുമായി സംയോജിപ്പിച്ച് പ്രസ്താവനകൾ classList.add അഥവാ classList.remove സോപാധികമായി ക്ലാസുകൾ പ്രയോഗിക്കാൻ.
ഡൈനാമിക് ക്ലാസ് മാറ്റങ്ങൾക്കുള്ള പ്രധാന ടെക്നിക്കുകൾ
ഒരു ക്ലിക്ക് ഇവൻ്റിന് മറുപടിയായി JavaScript, jQuery എന്നിവ ഉപയോഗിച്ച് ഒരു HTML എലമെൻ്റിൻ്റെ ക്ലാസ് എങ്ങനെ മാറ്റാമെന്ന് നൽകിയിരിക്കുന്ന സ്ക്രിപ്റ്റുകൾ കാണിക്കുന്നു. ആദ്യ സ്ക്രിപ്റ്റിൽ, ഈ പ്രവർത്തനക്ഷമത കൈവരിക്കാൻ പ്ലെയിൻ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു. ദി getElementById 'myButton' എന്ന ഐഡി ഉള്ള ബട്ടൺ എലമെൻ്റ് തിരഞ്ഞെടുക്കാൻ രീതി ഉപയോഗിക്കുന്നു. ദി onclick തുടർന്ന് ഈ ഘടകത്തിലേക്ക് ഇവൻ്റ് അസൈൻ ചെയ്തിരിക്കുന്നു, ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ എക്സിക്യൂട്ട് ചെയ്യേണ്ട ഫംഗ്ഷൻ വ്യക്തമാക്കുന്നു. ഈ പ്രവർത്തനത്തിനുള്ളിൽ, ബട്ടണിൻ്റെ className പ്രോപ്പർട്ടി 'മാറ്റം' ആയി സജ്ജീകരിച്ചിരിക്കുന്നു, അതിൻ്റെ ക്ലാസും തുടർന്ന് CSS-ൽ നിർവചിച്ചിരിക്കുന്ന ശൈലിയും മാറ്റുന്നു. DOM കൃത്രിമത്വത്തിനായി പ്ലെയിൻ JavaScript ഉപയോഗിക്കുന്നതിൻ്റെ ലാളിത്യവും നേരിട്ടുള്ളതയും ഈ സ്ക്രിപ്റ്റ് ഫലപ്രദമായി കാണിക്കുന്നു.
HTML ഡോക്യുമെൻ്റ് ട്രാവേഴ്സലും കൃത്രിമത്വവും ലളിതമാക്കുന്ന ഒരു ജനപ്രിയ ജാവാസ്ക്രിപ്റ്റ് ലൈബ്രറിയായ jQuery ഉപയോഗിച്ചുള്ള അതേ പ്രവർത്തനം രണ്ടാമത്തെ സ്ക്രിപ്റ്റ് ചിത്രീകരിക്കുന്നു. ഇവിടെ, jQuery അപരനാമം $ ബട്ടൺ ഘടകം തിരഞ്ഞെടുക്കാൻ ഉപയോഗിക്കുന്നു. ദി click ക്ലിക്ക് ഇവൻ്റിന് ഒരു ഇവൻ്റ് ഹാൻഡ്ലർ സജ്ജീകരിക്കാൻ രീതി പിന്നീട് പ്രയോഗിക്കുന്നു. ഈ ഹാൻഡ്ലറിനുള്ളിൽ, jQuery's ഉപയോഗിച്ച് ബട്ടണിൻ്റെ ക്ലാസ് പരിഷ്ക്കരിച്ചിരിക്കുന്നു removeClass ഒപ്പം addClass രീതികൾ. പ്ലെയിൻ ജാവാസ്ക്രിപ്റ്റുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ കൂടുതൽ വായിക്കാവുന്നതും സംക്ഷിപ്തവുമായ സമീപനം വാഗ്ദാനം ചെയ്യുന്ന ഈ രീതികൾ മൂലകത്തിൻ്റെ ക്ലാസുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള സൗകര്യപ്രദമായ മാർഗം നൽകുന്നു. ഉപയോക്തൃ ഇടപെടലിനെ അടിസ്ഥാനമാക്കി ഒരു എലമെൻ്റിൻ്റെ ക്ലാസ് ചലനാത്മകമായി മാറ്റുക എന്ന ഒരേ ലക്ഷ്യം വ്യത്യസ്ത ടൂളുകൾക്ക് എങ്ങനെ നേടാനാകുമെന്ന് തെളിയിക്കാൻ രണ്ട് സ്ക്രിപ്റ്റുകളും ലക്ഷ്യമിടുന്നു.
പ്രധാന പോയിൻ്റുകൾ സംഗ്രഹിക്കുന്നു
JavaScript അല്ലെങ്കിൽ jQuery ഉപയോഗിച്ച് ഒരു HTML എലമെൻ്റിൻ്റെ ക്ലാസ് കൈകാര്യം ചെയ്യുന്നത് ഒരു ഘടകത്തിൻ്റെ ശൈലിയും പെരുമാറ്റവും ചലനാത്മകമായി അപ്ഡേറ്റ് ചെയ്യുന്നതിനുള്ള ഒരു നേരായ മാർഗം നൽകുന്നു. തുടങ്ങിയ രീതികൾ മനസ്സിലാക്കി ഉപയോഗപ്പെടുത്തുന്നതിലൂടെ className, classList, കൂടാതെ jQuery-യുടെ ക്ലാസ് കൃത്രിമത്വ രീതികൾ, ഡവലപ്പർമാർക്ക് അവരുടെ വെബ് പേജുകളുടെ ഇൻ്ററാക്ടിവിറ്റിയും പ്രതികരണശേഷിയും വർദ്ധിപ്പിക്കാൻ കഴിയും, ഇത് ഉപയോക്താക്കൾക്ക് കൂടുതൽ ഇടപഴകുന്നു.