JavaScript ਨਾਲ ਕਲਾਸਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ
JavaScript HTML ਤੱਤਾਂ ਨਾਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਪਾਉਣ ਅਤੇ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਆਮ ਕੰਮ ਔਨਕਲਿਕ ਵਰਗੀਆਂ ਘਟਨਾਵਾਂ ਦੇ ਜਵਾਬ ਵਿੱਚ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲ ਰਿਹਾ ਹੈ।
ਇਹ ਗਾਈਡ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਕਿ ਤੁਹਾਡੇ ਵੈੱਬ ਪੰਨਿਆਂ 'ਤੇ ਗਤੀਸ਼ੀਲ ਸਟਾਈਲਿੰਗ ਅਤੇ ਵਿਵਹਾਰ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ, ਕਿਸੇ ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲਣ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਕਲਿੱਕ ਜਾਂ ਕਿਸੇ ਹੋਰ ਇਵੈਂਟ ਦਾ ਜਵਾਬ ਦੇ ਰਹੇ ਹੋ, ਇਹ ਤਕਨੀਕਾਂ ਤੁਹਾਡੇ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਹੁਨਰ ਨੂੰ ਵਧਾਉਣਗੀਆਂ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| className | ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਸੈੱਟ ਜਾਂ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
| getElementById | ਨਿਰਧਾਰਤ ਮੁੱਲ ਦੇ ਨਾਲ ID ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲਾ ਤੱਤ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
| onclick | ਫੰਕਸ਼ਨ ਨੂੰ ਐਗਜ਼ੀਕਿਊਟ ਕਰਨ ਲਈ ਸੈੱਟ ਕਰਦਾ ਹੈ ਜਦੋਂ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਿੱਕ ਇਵੈਂਟ ਵਾਪਰਦਾ ਹੈ। |
| removeClass | jQuery ਵਿੱਚ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। |
| addClass | jQuery ਵਿੱਚ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਵਿੱਚ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਕਲਾਸ ਦੇ ਨਾਮ ਜੋੜਦਾ ਹੈ। |
| $ | jQuery ਲਈ ਉਪਨਾਮ, ਤੱਤ ਚੁਣਨ ਅਤੇ ਉਹਨਾਂ 'ਤੇ ਕਾਰਵਾਈਆਂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
JavaScript ਕਲਾਸ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਮਝਣਾ
ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਦੇ ਜਵਾਬ ਵਿੱਚ JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ। ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਾਦੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦ ID 'myButton' ਦੇ ਨਾਲ ਬਟਨ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਵਿਧੀ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਦ ਇਵੈਂਟ ਫਿਰ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਐਗਜ਼ੀਕਿਊਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ। ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ, ਬਟਨ ਦਾ ਪ੍ਰਾਪਰਟੀ ਨੂੰ 'ਬਦਲਿਆ' 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਦੀ ਕਲਾਸ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸਦੀ ਸ਼ੈਲੀ ਨੂੰ CSS ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ DOM ਹੇਰਾਫੇਰੀ ਲਈ ਸਾਦੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਾਦਗੀ ਅਤੇ ਪ੍ਰਤੱਖਤਾ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ।
ਦੂਜੀ ਸਕ੍ਰਿਪਟ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਸੇ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਇੱਕ ਪ੍ਰਸਿੱਧ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਜੋ HTML ਦਸਤਾਵੇਜ਼ ਟ੍ਰਾਵਰਸਲ ਅਤੇ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਇੱਥੇ, jQuery ਉਰਫ ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਦ ਵਿਧੀ ਨੂੰ ਫਿਰ ਕਲਿੱਕ ਇਵੈਂਟ ਲਈ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਹੈਂਡਲਰ ਦੇ ਅੰਦਰ, ਬਟਨ ਦੀ ਕਲਾਸ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੋਧਿਆ ਗਿਆ ਹੈ ਅਤੇ 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 ਇੱਕ ਤੱਤ ਦੀ ਕਲਾਸ ਸੂਚੀ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਵਧੇਰੇ ਉੱਨਤ ਤਕਨੀਕਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ। ਅਜਿਹਾ ਹੀ ਇੱਕ ਤਰੀਕਾ ਹੈ ਸੰਪੱਤੀ, ਜੋ ਕਿ ਕਲਾਸਾਂ ਨਾਲ ਕੰਮ ਕਰਨ ਦਾ ਵਧੇਰੇ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਦ ਪ੍ਰਾਪਰਟੀ ਐਲੀਮੈਂਟ ਦੀਆਂ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਲਾਈਵ DOMTokenList ਸੰਗ੍ਰਹਿ ਵਾਪਸ ਕਰਦੀ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ , ਤੁਸੀਂ ਐਲੀਮੈਂਟ 'ਤੇ ਲਾਗੂ ਹੋਣ ਵਾਲੀਆਂ ਹੋਰ ਕਲਾਸਾਂ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਹਟਾ ਸਕਦੇ ਹੋ, ਟੌਗਲ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ।
ਉਦਾਹਰਨ ਲਈ, ਦ ਵਿਧੀ ਨੂੰ ਇੱਕ ਤੱਤ ਵਿੱਚ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਵਿਧੀ ਇੱਕ ਜਾਂ ਵਧੇਰੇ ਨਿਰਧਾਰਤ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਸਕਦੀ ਹੈ। ਦ ਵਿਧੀ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਕਲਾਸ ਨੂੰ ਜੋੜਦਾ ਹੈ ਜੇਕਰ ਇਹ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਅਤੇ ਜੇਕਰ ਅਜਿਹਾ ਹੁੰਦਾ ਹੈ ਤਾਂ ਇਸਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ, ਇਸ ਨੂੰ ਡਾਰਕ ਮੋਡ ਟੌਗਲਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਵਰਗੇ ਕੰਮਾਂ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਦ contains ਵਿਧੀ ਜਾਂਚ ਕਰਦੀ ਹੈ ਕਿ ਕੀ ਤੱਤ ਵਿੱਚ ਇੱਕ ਵਿਸ਼ੇਸ਼ ਕਲਾਸ ਹੈ, ਜੋ ਕਿ ਕਿਸੇ ਤੱਤ ਦੀ ਮੌਜੂਦਾ ਸਥਿਤੀ ਦੇ ਅਧਾਰ ਤੇ ਸਟਾਈਲ ਜਾਂ ਵਿਵਹਾਰ ਨੂੰ ਸ਼ਰਤ ਅਨੁਸਾਰ ਲਾਗੂ ਕਰਨ ਲਈ ਉਪਯੋਗੀ ਹੋ ਸਕਦੀ ਹੈ।
- ਮੈਂ ਇੱਕ ਤੱਤ ਵਿੱਚ ਕਈ ਕਲਾਸਾਂ ਕਿਵੇਂ ਜੋੜਾਂ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਈ ਆਰਗੂਮੈਂਟਾਂ ਨਾਲ ਵਿਧੀ: .
- ਕੀ ਮੈਂ ਇੱਕ ਤੱਤ ਤੋਂ ਸਾਰੀਆਂ ਕਲਾਸਾਂ ਨੂੰ ਹਟਾ ਸਕਦਾ ਹਾਂ?
- ਹਾਂ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਵਿਸ਼ੇਸ਼ਤਾ ਅਤੇ ਇਸਨੂੰ ਇੱਕ ਖਾਲੀ ਸਤਰ ਤੇ ਸੈਟ ਕਰੋ: .
- ਵਿਚਕਾਰ ਕੀ ਫਰਕ ਹੈ ਅਤੇ ?
- ਪੂਰੀ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਸੈੱਟ ਕਰਦਾ ਹੈ ਜਾਂ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਜਦਕਿ ਕਲਾਸਾਂ ਦੇ ਵਧੇਰੇ ਦਾਣੇਦਾਰ ਹੇਰਾਫੇਰੀ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
- ਮੈਂ ਕਿਵੇਂ ਜਾਂਚ ਕਰਾਂਗਾ ਕਿ ਕੀ ਕਿਸੇ ਤੱਤ ਦੀ ਇੱਕ ਖਾਸ ਕਲਾਸ ਹੈ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ ਵਿਧੀ: .
- ਮੈਂ ਕਿਸੇ ਤੱਤ 'ਤੇ ਕਲਾਸ ਨੂੰ ਕਿਵੇਂ ਟੌਗਲ ਕਰਾਂ?
- ਦੀ ਵਰਤੋਂ ਕਰੋ ਵਿਧੀ: .
- ਕੀ ਮੈਂ ਕਲਾਸਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ jQuery ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦਾ ਹਾਂ?
- ਹਾਂ, jQuery ਤਰੀਕੇ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ , , ਅਤੇ .
- ਲਾਈਵ DOMTokenList ਕੀ ਹੈ?
- ਏ ਇੱਕ ਲਾਈਵ ਸੰਗ੍ਰਹਿ ਹੈ ਜੋ ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਹੋ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾ ਬਦਲ ਜਾਂਦੀ ਹੈ।
- ਹੈ ਕੀ ਸਾਰੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ?
- ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ, ਪਰ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣ ਇਸਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਨਾ ਕਰਨ।
- ਮੈਂ ਸ਼ਰਤਾਂ ਦੇ ਅਧਾਰ ਤੇ ਕਲਾਸਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜ ਸਕਦਾ ਹਾਂ?
- ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ ਦੇ ਨਾਲ ਸੁਮੇਲ ਵਿੱਚ ਬਿਆਨ ਜਾਂ ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਰਤ ਅਨੁਸਾਰ ਲਾਗੂ ਕਰਨ ਲਈ।
ਡਾਇਨਾਮਿਕ ਕਲਾਸ ਬਦਲਾਅ ਲਈ ਮੁੱਖ ਤਕਨੀਕਾਂ
ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਦੇ ਜਵਾਬ ਵਿੱਚ JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ। ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਾਦੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦ ID 'myButton' ਦੇ ਨਾਲ ਬਟਨ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਵਿਧੀ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਦ ਇਵੈਂਟ ਫਿਰ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਐਗਜ਼ੀਕਿਊਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ। ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ, ਬਟਨ ਦਾ ਪ੍ਰਾਪਰਟੀ ਨੂੰ 'ਬਦਲਿਆ' 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਦੀ ਕਲਾਸ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸਦੀ ਸ਼ੈਲੀ ਨੂੰ CSS ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ DOM ਹੇਰਾਫੇਰੀ ਲਈ ਸਾਦੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਾਦਗੀ ਅਤੇ ਪ੍ਰਤੱਖਤਾ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ।
ਦੂਜੀ ਸਕ੍ਰਿਪਟ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਸੇ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਇੱਕ ਪ੍ਰਸਿੱਧ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਜੋ HTML ਦਸਤਾਵੇਜ਼ ਟ੍ਰਾਵਰਸਲ ਅਤੇ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਇੱਥੇ, jQuery ਉਰਫ ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਦ ਵਿਧੀ ਨੂੰ ਫਿਰ ਕਲਿੱਕ ਇਵੈਂਟ ਲਈ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਹੈਂਡਲਰ ਦੇ ਅੰਦਰ, ਬਟਨ ਦੀ ਕਲਾਸ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੋਧਿਆ ਗਿਆ ਹੈ ਅਤੇ addClass ਢੰਗ. ਇਹ ਵਿਧੀਆਂ ਸਾਦੇ JavaScript ਦੇ ਮੁਕਾਬਲੇ ਇੱਕ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸੰਖੇਪ ਪਹੁੰਚ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹੋਏ, ਤੱਤ ਦੀਆਂ ਕਲਾਸਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਦਾ ਇੱਕ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਦੋਵੇਂ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਉਦੇਸ਼ ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਟੂਲ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਦਲਣ ਦੇ ਇੱਕੋ ਟੀਚੇ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ।
JavaScript ਜਾਂ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨਾ ਇੱਕ ਤੱਤ ਦੀ ਸ਼ੈਲੀ ਅਤੇ ਵਿਵਹਾਰ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨ ਦਾ ਇੱਕ ਸਿੱਧਾ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਵਰਗੇ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝ ਕੇ ਅਤੇ ਵਰਤ ਕੇ , , ਅਤੇ jQuery ਦੇ ਕਲਾਸ ਹੇਰਾਫੇਰੀ ਵਿਧੀਆਂ, ਡਿਵੈਲਪਰ ਆਪਣੇ ਵੈਬ ਪੇਜਾਂ ਦੀ ਪਰਸਪਰ ਪ੍ਰਭਾਵਸ਼ੀਲਤਾ ਅਤੇ ਜਵਾਬਦੇਹੀ ਨੂੰ ਵਧਾ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧੇਰੇ ਰੁਝੇਵੇਂ ਬਣਾ ਸਕਦੇ ਹਨ।