ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்பில் பல பண்புக்கூறுகளை அமைப்பதற்கான செயல்முறையை இந்த இடுகை விளக்குகிறது.
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு தனிமத்தில் பல பண்புக்கூறுகளை எவ்வாறு அமைப்பது?
ஒரு உறுப்பில் ஒரே நேரத்தில் பல பண்புக்கூறுகளை அமைக்க, முதலில், பண்புக்கூறு பெயர்கள் மற்றும் மதிப்புகளுடன் ஒரு பொருளை உருவாக்கவும். பொருளின் விசைகளின் பட்டியலை வரிசையாகப் பெறவும் ' Object.keys() ” முறை, பின்னர், குறிப்பிட்ட HTML உறுப்பில் உள்ள அனைத்து பண்புக்கூறுகளையும் “ setAtribute() ”முறை.
தொடரியல்
கொடுக்கப்பட்ட தொடரியல் setAttribute() முறைக்கு பயன்படுத்தப்படுகிறது:
உறுப்பு. தொகுப்பு பண்பு ( attrName, attrValue ) ;
மேலே உள்ள தொடரியல் இரண்டு அளவுருக்களைக் கொண்டுள்ளது: ' பெயர் 'மற்றும்' மதிப்பு ”.
- ' attrபெயர் ” என்பது புதிய பண்புக்கூறின் பெயர்.
- ' attrValue ” என்பது புதிய பண்புக்கூறின் மதிப்பு.
- இந்த முறை ஒரு புதிய பண்புக்கூறை உருவாக்கி அதற்கு மதிப்பை வழங்கும். குறிப்பிட்ட பண்புக்கூறு ஏற்கனவே இருந்தால், அதன் மதிப்பு புதுப்பிக்கப்படும்.
Object.keys() முறைக்கு கொடுக்கப்பட்ட தொடரியல் பயன்படுத்தவும்:
பொருள் . விசைகள் ( பொருள் )இது கொடுக்கப்பட்ட பொருளின் வரிசையை வழங்குகிறது.
எடுத்துக்காட்டு 1: ஒவ்வொரு உறுப்புக்கும் பல பண்புக்கூறுகளை அமைக்கவும்.
முதலில், HTML கோப்பில் ஒரு உறுப்பை உருவாக்கவும்:
< பொத்தான் ஐடி = 'பொத்தானை' > லினக்ஷிண்ட் பொத்தானை >தற்போது, இணையப் பக்கம் இப்படி இருக்கும்:
ஜாவாஸ்கிரிப்ட் குறியீட்டில், முதலில், ஒரு பொருளை உருவாக்கவும். உறுப்பு பண்புக்கூறுகள் ” மற்றும் பொருளில் பெயர்கள் மற்றும் மதிப்புகளுடன் பண்புகளைச் சேர்க்கவும். இங்கே, ஸ்டைல் பண்புக்கூறு, உறுப்பின் பெயர் மற்றும் பொத்தான் உறுப்புக்கான செயலிழக்கச் சொத்தை சேர்ப்போம்:
நிலையான உறுப்பு பண்புக்கூறுகள் = {பாணி : பின்னணி நிறம்: rgb(153, 28, 49); நிறம்: வெள்ளை;' ,
பெயர் : 'லினக்ஸ் பட்டன்' ,
ஊனமுற்றவர் : '' ,
} ;
இப்போது, பெயரிடப்பட்ட ஒரு செயல்பாட்டை வரையறுக்கவும் setMultiple AttributesonElement 'எங்கே முதலில் அழைக்கவும்' Object.keys() பொருளின் விசைகளின் வரிசையைப் பெறுவதற்கான முறை, பின்னர் பயன்படுத்தவும் ஒவ்வொரு() 'வரிசையின் மூலம் மீண்டும் மீண்டும் சொல்லும் முறை மற்றும் இறுதியாக ' setAtribute() 'குறிப்பிட்ட HTML உறுப்பில் வரையறுக்கப்பட்ட அனைத்து பண்புக்கூறுகளையும் அமைக்கும் முறை.
செயல்பாடு setMultipleAttributesonElement ( உறுப்பு, உறுப்பு பண்புக்கூறுகள் ) {பொருள் . விசைகள் ( உறுப்பு பண்புக்கூறுகள் ) . ஒவ்வொரு ( பண்பு => {
உறுப்பு. தொகுப்பு பண்பு ( பண்பு, elemAttributes [ பண்பு ] ) ;
} ) ;
}
'என்ற உதவியுடன் அதன் ஒதுக்கப்பட்ட ஐடியைப் பயன்படுத்தி பொத்தானைப் பெறவும் getElementById() ”முறை:
நிலையான பொத்தானை = ஆவணம். getElementById ( 'பொத்தானை' ) ;வரையறுக்கப்பட்ட செயல்பாட்டை அழைக்கவும் ' setMultiple AttributesonElement ” மற்றும் உறுப்பை முதல் வாதமாகவும், பண்புக்கூறுகளின் பொருளை இரண்டாவது வாதமாகவும் அனுப்பவும்:
setMultiple AttributesonElement ( பொத்தான், உறுப்பு பண்புக்கூறுகள் ) ;ஒரு பொத்தானின் பல பண்புக்கூறுகள் வெற்றிகரமாகச் சேர்க்கப்பட்டதை வெளியீடு காட்டுகிறது:
பண்புக்கூறுகளுக்கு ஒரு தனி பொருளை உருவாக்காமல் ஒரு உறுப்பில் பல பண்புகளை அமைக்கலாம். இதைச் செய்ய, கீழே உள்ள உதாரணத்தைப் பின்பற்றவும்.
எடுத்துக்காட்டு 2: ஒரு தனிமத்தில் பல பண்புக்கூறுகளை அமைக்கவும்.
ஜாவாஸ்கிரிப்ட் கோப்பில் இரண்டு அளவுருக்கள் கொண்ட ஒரு செயல்பாட்டை வரையறுத்து, '' என அழைப்பதன் மூலம் பல பண்புகளை அமைக்க ஃபார் லூப்பைப் பயன்படுத்தவும் setAtribute() ”முறை:
செயல்பாடு setMultipleAttributesonElement ( உறுப்பு, உறுப்பு பண்புக்கூறுகள் ) {க்கான ( நான் elemAttributes இல் அனுமதிக்கிறேன் ) {
உறுப்பு. தொகுப்பு பண்பு ( i, elemAttributes [ நான் ] ) ;
}
}
ஒதுக்கப்பட்ட ஐடியைப் பயன்படுத்தி பொத்தானை மீட்டெடுக்கவும்:
நிலையான பொத்தானை = ஆவணம். getElementById ( 'பொத்தானை' ) ;பெயர்-மதிப்பு ஜோடிகளின் வடிவத்தில் பொத்தான் உறுப்பு மற்றும் பல பண்புக்கூறுகளைக் கடந்து வரையறுக்கப்பட்ட செயல்பாட்டை அழைக்கவும்:
setMultiple AttributesonElement ( பொத்தானை, { 'பாணி' : 'பின்னணி-நிறம்: rgb(153, 28, 49); நிறம்: வெள்ளை;' , 'ஊனமுற்றவர்' : '' , 'பெயர்' : 'லினக்ஸ் பட்டன்' } ) ;வெளியீடு
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்பில் பல பண்புக்கூறுகளை அமைப்பது தொடர்பான அனைத்து அத்தியாவசிய தகவல்களையும் தொகுத்துள்ளோம்.
முடிவுரை
ஜாவாஸ்கிரிப்ட் முன் வரையறுக்கப்பட்டது setAtribute() ஒரு உறுப்புக்கு ஒற்றை அல்லது பல பண்புக்கூறுகளை அமைக்க 'முறை பயன்படுத்தப்படுகிறது. ஒரு உறுப்பில் பல பண்புக்கூறுகளை அமைக்க, முதலில், பெயர்கள்-மதிப்புகள் வடிவில் பண்புக்கூறுகளைக் கொண்ட ஒரு பொருளை உருவாக்கவும். '' ஐப் பயன்படுத்தி ஒரு வரிசையில் உள்ள பொருட்களின் விசைகளைப் பெறுங்கள் Object.keys() ” முறை, பின்னர் குறிப்பிட்ட உறுப்புகளில் உள்ள அனைத்து பண்புக்கூறுகளையும் “ உடன் அமைக்கவும் setAtribute() ”முறை. இந்த இடுகையில், ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி HTML உறுப்பில் பல பண்புக்கூறுகளை அமைப்பதற்கான செயல்முறையை நாங்கள் விளக்கியுள்ளோம்.