ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை எவ்வாறு மாற்றுவது?

இணையப் பக்கம் அல்லது இணையதளத்தை வடிவமைக்கும் கட்டத்தில், சில புதுப்பிப்புகளின் காரணமாக சில குறிப்பிட்ட கூறுகளை நீங்கள் அணுக வேண்டிய அவசியமில்லாத சூழ்நிலைகள் உள்ளன. மேலும், html இல் ஒரு குறிப்பிட்ட உறுப்புக்கு ஒன்றுக்கு மேற்பட்ட வகுப்புகளை ஒதுக்க வேண்டிய அவசியம் ஏற்படும் போது. இதுபோன்ற சூழ்நிலைகளில், ஜாவாஸ்கிரிப்டில் உள்ள HTML உறுப்புகளின் வகுப்பை மாற்றுவது, அத்தகைய சூழ்நிலைகளைத் தீர்க்க பெரும் உதவியாக இருக்கும்.

இந்த வலைப்பதிவு ஜாவாஸ்கிரிப்டில் HTML உறுப்புகளின் வகுப்பை மாற்றும்போது கருத்தில் கொள்ள வேண்டிய அணுகுமுறைகளை விளக்கும்.

ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை எவ்வாறு மாற்றுவது?

ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை மாற்ற, பின்வரும் அணுகுமுறைகளைப் பயன்படுத்தலாம்:

• • ' வகுப்பின் பெயர் ”சொத்து.
  • ' வகுப்பு பட்டியல் ”சொத்து.

அணுகுமுறை 1: ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை கிளாஸ்நேம் பண்பைப் பயன்படுத்தி மாற்றவும்

ஒரு உறுப்புடன் தொடர்புடைய உருவாக்கப்பட்ட வகுப்பை அணுகி அதற்கு வேறு வகுப்பை ஒதுக்குவதன் மூலம் இந்த அணுகுமுறை நடைமுறைக்கு வரலாம்.

பின்வரும் உதாரணம் கூறப்பட்ட கருத்தை நிரூபிக்கிறது.

உதாரணமாக

கீழே கொடுக்கப்பட்டுள்ள குறியீட்டில் ' <உடல்> 'குறிச்சொல்,' இல் பின்வரும் தலைப்பைச் சேர்க்கவும்

” குறிச்சொல். அதன் பிறகு, குறிப்பிட்ட பொத்தானை உருவாக்கவும், அது இயல்புநிலையாக ஒதுக்கப்படும் ' வர்க்கம் ” இது பின்னர் குறியீட்டில் மாற்றப்படும். மேலும், அதை ஒதுக்கவும் ' ஐடி 'மற்றும் இணைக்கப்பட்ட' கிளிக் செய்யவும் ” வகுப்பு() செயல்பாட்டைத் தூண்டும் நிகழ்வு

பின்னர் குறியீட்டில், பின்வரும் செய்தியை '

'என்ற குறிச்சொல்லை DOM இல் வகுப்பின் மாற்றத்தில் காண்பிக்க:

HTML குறியீடு:

< உடல் பாணி = 'உரை-சீரமைப்பு: மையம்;' >
< h2 > உறுப்பு மாற்றவும் வகுப்பின் பெயர்

பழைய வகுப்பின் பெயர்: default class

JS குறியீட்டில், ஒரு செயல்பாட்டை அறிவிக்கவும். வர்க்கம்() ”. இங்கே, ' ஐடி மூலம் இயல்புநிலை வகுப்பை அணுகவும் document.getElementById() ”முறை. ' வகுப்பின் பெயர் 'பண்பு உருவாக்கப்பட்ட வகுப்பை' என்ற வகுப்பிற்கு மாற்றும் புதிய வகுப்பு ”.

இறுதியாக, ' உள் உரை ” பண்பு மாற்றப்பட்ட வகுப்போடு பின்வரும் செய்தியைக் காண்பிக்கும்:

JS குறியீடு:

வெளியீடு

மேலே உள்ள வெளியீட்டில், '' இன் மாற்றத்தைக் கவனியுங்கள் வர்க்கம் 'DOM இல் உள்ள பொத்தானைக் கிளிக் செய்தவுடன் வலதுபுறத்தில்.

அணுகுமுறை 2: ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை கிளாஸ்லிஸ்ட் பண்பைப் பயன்படுத்தி மாற்றவும்

குறிப்பிட்ட வகுப்பை அகற்றி, அதற்கு புதிய வகுப்பை ஒதுக்க, அதன் மூலம் அதை மாற்ற இந்தக் குறிப்பிட்ட அணுகுமுறையை செயல்படுத்தலாம்.

உதாரணமாக

முதலாவதாக, ஒரு தலைப்பைச் சேர்ப்பதற்கான மேலே விவாதிக்கப்பட்ட முறைகளை மீண்டும் செய்யவும், ஒதுக்கப்பட்ட வகுப்பு, ஐடி மற்றும் இணைக்கப்பட்ட ஆன்க்ளிக் நிகழ்வைக் கொண்டு ஒரு பொத்தானை உருவாக்கவும். அடுத்து, '' இல் தலைப்புப் பகுதியைச் சேர்க்கவும்

பொத்தானைக் கிளிக் செய்வதன் மூலம் மாற்றப்பட்ட வகுப்பைப் பயனருக்குத் தெரிவிக்க 'குறிச்சொல்:

HTML குறியீடு

< உடல் பாணி = 'உரை-சீரமைப்பு: மையம்;' >
< h2 > உறுப்பு வகுப்பை மாற்றவும் ! h2 >
< பொத்தானை வர்க்கம் = 'இணையதளம்' கிளிக் செய்யவும் = 'வர்க்கம்()' ஐடி = 'மாற்றம்' > என்னை கிளிக் செய்யவும் பொத்தானை >
< h3 ஐடி = 'தலை' பாணி = 'பின்னணி நிறம்: வெளிர் சாம்பல்;' > பழைய வகுப்பின் பெயர்: இணையதளம் h3 >
உடல் >

இப்போது, ​​ஒரு செயல்பாட்டை அறிவிக்கவும் '' வர்க்கம்() ”. அதன் வரையறையில், ' வகுப்பு பட்டியல் 'சொத்து சேர்த்து' அகற்று() 'அணுகப்பட்ட வகுப்பைத் தவிர்ப்பதற்கான முறை' இணையதளம் ” இது உருவாக்கப்பட்ட பொத்தானுக்கு ஒத்திருக்கிறது.

அடுத்த கட்டத்தில், விவாதிக்கப்பட்ட சொத்தைப் பயன்படுத்தி அதே வகுப்பிற்கு புதிய வகுப்பை ஒதுக்கவும் கூட்டு() ”முறை. கடைசியாக, முந்தைய அணுகுமுறையில் விவாதிக்கப்பட்டபடி மாற்றப்பட்ட வகுப்பைக் காட்டவும்:

JS குறியீடு

செயல்பாடு வர்க்கம் ( ) {
document.getElementById ( 'மாற்றம்' ) .classList.remove ( 'இணையதளம்' )
document.getElementById ( 'மாற்றம்' ) .classList.add ( 'லினக்ஸ்' ) ;
var அணுகல் = document.getElementById ( 'மாற்றம்' ) .வகுப்பு பட்டியல்;
document.getElementById ( 'தலை' ) .innerHTML = 'புதிய வகுப்பின் பெயர்:' + அணுகல்;
}

வெளியீடு

இந்த எழுதுதல் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்புகளின் வகுப்பை மாற்றுவதற்கான கருத்தை அழிக்கும்.

முடிவுரை

' வகுப்பின் பெயர் 'மற்றும்' வகுப்பு பட்டியல் HTML உறுப்புகளின் வகுப்பை மாற்ற பண்புகள் பயன்படுத்தப்படலாம். classList சொத்துடன் ஒப்பிடும்போது, ​​className பண்பு, விரும்பிய தேவையை நிறைவேற்றுவதில் வேகமான அணுகுமுறைக்கு வழிவகுத்தது, ஏனெனில் இது குறைவான குறியீடு சிக்கலை உள்ளடக்கியது. classList சொத்து, மறுபுறம், கூடுதல் இரண்டு முறைகளின் உதவியுடன் இயல்புநிலை வகுப்பை மாற்றியது. ஜாவாஸ்கிரிப்ட் மூலம் HTML உறுப்புகளின் வகுப்பை மாற்றுவதற்கான அணுகுமுறைகளை இந்தக் கட்டுரை விளக்குகிறது.