இந்த கையேடு JavaScript இல் செயலில் உள்ள வகுப்பைச் சேர்ப்பதற்கான செயல்முறையை விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் ஆக்டிவ் கிளாஸை எப்படி சேர்ப்பது?
செயலில் உள்ள வகுப்பைச் சேர்க்க, பின்வரும் முறைகளைப் பயன்படுத்துவோம்:
முதல் முறைக்கு வருவோம்!
முறை 1: ஜாவாஸ்கிரிப்ட்டில் செயலில் உள்ள வகுப்பைச் சேர்க்க, document.getElementById()ஐ classList.add() முறையுடன் பயன்படுத்தவும்
ஜாவாஸ்கிரிப்ட்டில், ' document.getElementById() ” முறையானது ஒரு குறிப்பிட்ட உறுப்பை அதன் ஐடி மூலம் அணுக பயன்படுகிறது. இருப்பினும், இது அவற்றின் ஐடிகளின் அடிப்படையில் உறுப்புகளைத் தேர்ந்தெடுக்கிறது, வகுப்புகள் அல்ல. நீங்கள் இதைப் பயன்படுத்தலாம் ' classList.add() ” ஜாவாஸ்கிரிப்ட்டில் செயலில் உள்ள வகுப்பைச் சேர்ப்பதற்கான முறை.
ஒரு உதாரணம் மூலம் இந்த முறையை ஆராய்வோம்.
உதாரணமாக
எங்கள் HTML கோப்பில், நாங்கள் ' 'சில உரையுடன் குறிச்சொல், அதன் ஐடியை' எனக் குறிப்பிடவும் txt ', மற்றும் ஒரு ' சேர்க்கவும் கிளிக் செய்யவும் 'நிகழ்வைத் தூண்டும்' செயல்படுத்த() ” செயல்பாடு.
குறிச்சொல்லை
குறிச்சொல்லுக்குள் சேர்க்கவும்: < p id = 'txt' கிளிக் செய்யவும் = 'செயல்படுத்த()' > இங்கே தட்டவும் ப >ஜாவாஸ்கிரிப்ட் கோப்பில், Activate() செயல்பாட்டை வரையறுக்கவும், அது முதலில் ஆவணம்.getElementbyId() முறையில் அதன் ஐடியைப் பயன்படுத்தி பத்தி உறுப்பை அணுகும் விதத்தில். பின்னர், ஸ்டைலிங் நோக்கங்களுக்காக அதன் வகுப்பு பட்டியலில் CSS வகுப்பைச் சேர்க்கவும்:
செயல்பாடு செயல்படுத்துகிறது ( ) {
அங்கே ஒரு = ஆவணம். getElementById ( 'txt' ) ;
அ. வகுப்பு பட்டியல் . கூட்டு ( 'புதிய வகுப்பு' ) ;
}
CSS கோப்பில், ஒரு புள்ளியை முன் வைக்கவும் புதிய வகுப்பு 'மற்றும்' ஒதுக்கவும் பின்னணி நிறம் 'சொத்து ஒரு மதிப்பு' ஆரஞ்சு ”:
. புதிய வகுப்பு {பின்னணி - நிறம் : ஆரஞ்சு ;
}
இதன் விளைவாக, நீங்கள் பத்தி உறுப்பைக் கிளிக் செய்யும் போது, சேர்க்கப்பட்ட பின்னணி சொத்து அதற்குப் பயன்படுத்தப்படும்:
செயலில் உள்ள வகுப்பைச் சேர்க்க, document.querySelector() ஐப் பயன்படுத்தும் பின்வரும் முறையைப் பார்ப்போம்.
முறை 2: ஜாவாஸ்கிரிப்ட்டில் செயலில் உள்ள வகுப்பைச் சேர்க்க document.querySelector()ஐ classList.add() முறையுடன் பயன்படுத்தவும்
ஜாவாஸ்கிரிப்ட்டில், ' document.querySelector() 'குறியீட்டிலிருந்து முதல் உறுப்பைப் பெறுவதற்கு முறை பயன்படுத்தப்படுகிறது. நீங்கள் querySelector() முறையில் வகுப்புகள் மற்றும் ஐடிகள் இரண்டையும் குறிப்பிடலாம். இதை ' classList.add() ” ஜாவாஸ்கிரிப்ட்டில் செயலில் உள்ள வகுப்பைச் சேர்ப்பதற்கான முறை.
உதாரணமாக
நாங்கள் இப்போது பயன்படுத்துவோம் ' document.querySelector() 'ஐடியுடன்' #txt ” பத்தி உறுப்பைத் தேர்ந்தெடுக்க. மீண்டும், செயலில் உள்ளவற்றைச் சேர்க்க classList.add() முறை பயன்படுத்தப்படும். புதிய வகுப்பு ”:
செயல்பாடு செயல்படுத்துகிறது ( ) {அங்கே ஒரு = ஆவணம். querySelector ( '#txt' ) ;
அ. வகுப்பு பட்டியல் . கூட்டு ( 'புதிய வகுப்பு' ) ;
}
வெளியீடு
ஜாவாஸ்கிரிப்டில் செயலில் உள்ள வகுப்பைச் சேர்க்க இரண்டு எளிய முறைகளைக் கற்றுக்கொண்டோம்
முடிவுரை
செயலில் உள்ள வகுப்பைச் சேர்க்க, நாம் ' getElementById() ' அல்லது ' querySelector() ” classList.add() முறையுடன். குறிப்பிடப்பட்ட இரண்டு முறைகளும் முதலில் அவற்றின் ஐடி மூலம் உறுப்புகளைப் பெறுகின்றன, பின்னர் classList.add() முறையைப் பயன்படுத்தி, ஸ்டைலிங் நோக்கங்களுக்காகப் பயன்படுத்தக்கூடிய உறுப்புக்கு ஒதுக்கப்பட்ட புதிய வகுப்புப் பெயர். இந்த இடுகை JavaScript இல் செயலில் உள்ள வகுப்பைச் சேர்ப்பது தொடர்பான செயல்முறையை விவரிக்கிறது.