இந்த கட்டுரை ஜாவாஸ்கிரிப்ட் உடன் CSS ஐ சேர்க்கும் முறைகளை விவரிக்கும்.
ஜாவாஸ்கிரிப்ட் மூலம் CSS ஐ எவ்வாறு சேர்ப்பது?
ஜாவாஸ்கிரிப்டில், பின்வரும் முறைகள் அல்லது அணுகுமுறைகளைப் பயன்படுத்தி அதன் பாணி சொத்தை மாற்றுவதன் மூலம் ஒரு உறுப்புக்கு CSS பாணிகளைச் சேர்க்கலாம்:
- இன்லைன் ஸ்டைலிங்காக உடை சொத்து
- இன்லைன் ஸ்டைலிங்காக setAtribute() முறை
- உலகளாவிய ஸ்டைலிங்காக createElement() முறை
முறை 1: 'ஸ்டைல்' பண்பைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் உடன் CSS ஐச் சேர்க்கவும்
ஜாவாஸ்கிரிப்ட்டில் CSS ஐச் சேர்க்க, ' பாணி ”சொத்து. ஒரு உறுப்பின் இன்லைன் பாணிகளை அணுகவும் கையாளவும் இது பயன்படுகிறது. இது ஒரு தனிமத்தின் இன்லைன் பாணிகளைக் குறிக்கும் ஒரு பொருளை வழங்குகிறது மற்றும் தனிப்பட்ட பாணி பண்புகளைப் பெற அல்லது அமைக்க அனுமதிக்கிறது.
தொடரியல்
ஜாவாஸ்கிரிப்டில் CSS பாணியைச் சேர்ப்பதற்கு, பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது ' பாணி 'சொத்து:
உறுப்பு. பாணி ;
இங்கே,' உறுப்பு ” என்பது ஒரு HTML உறுப்புக்கான குறிப்பு.
உதாரணமாக
பின்வரும் எடுத்துக்காட்டில், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி பொத்தான்களை ஸ்டைல் செய்வோம். முதலில், நாங்கள் மூன்று பொத்தான்களை உருவாக்கி அவற்றுக்கு ஐடிகளை ஒதுக்குவோம், இது ஸ்டைலிங்கிற்கான பொத்தான் கூறுகளை அணுக உதவுகிறது:
< பொத்தான் ஐடி = 'btn2' > நிராகரிக்கவும் பொத்தானை >
< பொத்தான் ஐடி = 'btn3' > ஏற்றுக்கொள் பொத்தானை >
ஸ்டைலிங் முன் வெளியீடு இப்படி இருக்கும்:
இப்போது, இந்த பொத்தான்களை ஜாவாஸ்கிரிப்ட்டில் ஸ்டைல் செய்வோம் ' பாணி ”சொத்து. முதலில், அனைத்து பொத்தான் கூறுகளையும் அவற்றின் ஒதுக்கப்பட்ட ஐடிகளைப் பயன்படுத்தி ' getElementById() ”முறை:
ஒப்புக்கொள்ளட்டும் = ஆவணம். getElementById ( 'btn1' ) ;நிராகரிக்கட்டும் = ஆவணம். getElementById ( 'btn2' ) ;
ஏற்றுக்கொள்ளட்டும் = ஆவணம். getElementById ( 'btn3' ) ;
இந்த அனைத்து பொத்தான்களின் பின்னணி வண்ணங்களையும் '' பயன்படுத்தி அமைக்கவும் பாணி 'சொத்து:
ஒப்புக்கொள். பாணி . பின்னணி நிறம் = 'பச்சை' ;நிராகரிக்கின்றன. பாணி . பின்னணி நிறம் = 'சிவப்பு' ;
ஏற்றுக்கொள். பாணி . பின்னணி நிறம் = 'மஞ்சள்' ;
நீங்கள் பார்க்க முடியும் என, பொத்தான்கள் 'ஐப் பயன்படுத்தி வெற்றிகரமாக வடிவமைக்கப்பட்டுள்ளன. பாணி 'சொத்து:
முறை 2: “setAttribute()” முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் மூலம் CSS ஐச் சேர்க்கவும்
ஜாவாஸ்கிரிப்டில் CSS ஸ்டைலிங் சேர்க்க, ' setAtribute() ”முறை. ஒரு பண்புக்கூறு மற்றும் அதன் மதிப்பை ஒரு HTML உறுப்புக்கு அமைக்க அல்லது சேர்க்க இது பயன்படுகிறது.
தொடரியல்
பின்வரும் தொடரியல் பயன்படுத்தப்படுகிறது ' setAtribute() ”முறை:
உதாரணமாக
இங்கே, ஜாவாஸ்கிரிப்ட்டில் உள்ள பொத்தான்களில் வெவ்வேறு ஸ்டைல்களை அமைப்போம் ' setAtribute() ”முறை. அனைத்து பொத்தான்களின் எல்லை ஆரத்தையும் ' .5ரெம் ', மற்றும் ' இன் உரை நிறம் ஒப்புக்கொள்கிறேன் 'மற்றும்' நிராகரிக்கவும் 'பொத்தான்கள்' வெள்ளை ”.
நிராகரிக்கின்றன. தொகுப்பு பண்பு ( 'பாணி' , 'பின்னணி-நிறம்: சிவப்பு; நிறம்: வெள்ளை; எல்லை-ஆரம்: .5rem;' ) ;
ஏற்றுக்கொள். தொகுப்பு பண்பு ( 'பாணி' , 'பின்னணி-நிறம்: மஞ்சள்; எல்லை-ஆரம்: .5rem;' ) ;
வெளியீடு
முறை 3: 'createElement()' முறையைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் உடன் CSS ஐச் சேர்க்கவும்
CSS ஸ்டைலிங்கில் உள்ளதைப் போல ஜாவாஸ்கிரிப்ட் ஸ்டைலிங்கில் வகுப்புகள் அல்லது ஐடிகளை உருவாக்க விரும்பினால், ' உருவாக்க உறுப்பு() ”முறை. இது ஒரு புதிய உறுப்பை மாறும் வகையில் உருவாக்கப் பயன்படுகிறது. ஸ்டைலிங்கிற்காக ' பாணி ” உறுப்பு இந்த முறையைப் பயன்படுத்துகிறது. ' உருவாக்க உறுப்பு ('பாணி') ” ஜாவாஸ்கிரிப்டில் உள்ள முறையானது ஒரு புதிய பாணி உறுப்பை மாறும் வகையில் உருவாக்கப் பயன்படுகிறது, இது ஒரு வலைப்பக்கத்தில் CSS பாணிகளைச் சேர்க்கப் பயன்படுகிறது.
தொடரியல்
கொடுக்கப்பட்ட தொடரியல் ' உருவாக்க உறுப்பு() ”முறை:
ஜாவாஸ்கிரிப்டில் CSS பாணியைச் சேர்க்க, கொடுக்கப்பட்ட தொடரியல் பயன்படுத்தவும்:
நிலையான பாணி = ஆவணம். உருவாக்க உறுப்பு ( 'பாணி' ) ;பின் கீழே உள்ள தொடரியல் மூலம் தலை குறிச்சொல்லில் நடை உறுப்பைச் சேர்க்கவும்:
ஆவணம். தலை . appendChild ( பாணி ) ;இங்கே,' பாணி ” என்பது புதிதாக உருவாக்கப்பட்ட பாணி உறுப்புக்கான குறிப்பு, மேலும் “ ஆவணம்.தலை ” என்பது HTML ஆவணத்தின் முக்கிய உறுப்பு.
உதாரணமாக
முதலில், '' ஐப் பயன்படுத்தி ஒரு பாணி உறுப்பை உருவாக்கவும் உருவாக்க உறுப்பு() ”முறை:
இப்போது, '' ஒன்றை உருவாக்கவும் btn 'அனைத்து பொத்தான்கள் மற்றும் ஐடிகளிலும் ஒரே ஸ்டைலிங்கைப் பயன்படுத்துவதற்கான வகுப்பு' btn1 ”,” btn2 'மற்றும்' btn3 ” தனிப்பட்ட பொத்தான் ஸ்டைலிங்கிற்கு:
பாணி. உள் HTML = `. btn {
எழுத்துரு - அளவு : 1.1ரெம் ;
திணிப்பு : 3px ;
விளிம்பு : 2px ;
எழுத்துரு - குடும்பம் : இல்லாமல் - செரிஃப் ;
எல்லை - ஆரம் : .5ரெம் ;
}
#btn1 {
பின்னணி - நிறம் : பச்சை ;
நிறம் : வெள்ளை ;
}
#btn2 {
பின்னணி - நிறம் : சிவப்பு ;
நிறம் : வெள்ளை ;
}
#btn3 {
பின்னணி - நிறம் : மஞ்சள் ;
}
` ;
இப்போது, ' என்பதற்கு அளவுருவாக அனுப்புவதன் மூலம் பாணி உறுப்பை ஆவணத்தின் தலையில் சேர்க்கவும் appendChild() ”முறை:
ஆவணம். தலை . appendChild ( பாணி ) ; வெளியீடு
ஜாவாஸ்கிரிப்டில் CSS ஐச் சேர்ப்பது அவ்வளவுதான்.
முடிவுரை
ஜாவாஸ்கிரிப்டுடன் CSS ஐச் சேர்க்க, இன்லைன் ஸ்டைலிங்கைப் பயன்படுத்தவும் பாணி 'சொத்து, மற்றும்' setAtribute() 'முறை, அல்லது உலகளாவிய ஸ்டைலிங் பயன்படுத்தி' உருவாக்க உறுப்பு() ”முறை. உலகளாவிய ஸ்டைலிங் மிகவும் திறமையானது, அதே நேரத்தில் ஒரு இன்லைன் முறை பரிந்துரைக்கப்படவில்லை, ஏனெனில் இது பயன்பாட்டின் பாணிகளைப் பராமரிப்பதை கடினமாக்குகிறது மற்றும் குறியீட்டை மீண்டும் செய்ய வழிவகுக்கும். இந்த கட்டுரை ஜாவாஸ்கிரிப்ட் உடன் CSS ஐ சேர்க்கும் முறைகளை விவரித்தது.