இந்த வழிகாட்டியானது ஜாவாஸ்கிரிப்டில் உள்ள HTML DOM எலிமென்ட் 'ஸ்டைல்' சொத்தின் குறிக்கோள் மற்றும் வேலை பற்றி விளக்குகிறது.
ஜாவாஸ்கிரிப்ட்டில் HTML DOM உறுப்பு 'ஸ்டைல்' சொத்து எவ்வாறு செயல்படுகிறது?
HTML DOM' பாணி ” என்பது படிக்க மட்டுமேயான சொத்து ஆகும், இது ஒதுக்கப்பட்ட ஸ்டைலிங் பண்புகளின் அடிப்படையில் செயல்படுகிறது. மேலும், இது ' CSSS ஸ்டைல் பிரகடனம் குறிப்பிட்ட HTML உறுப்பின் அனைத்து இன்லைன் பாணி பண்புக்கூறுகளையும் உள்ளடக்கிய பொருள்.
குறிப்பு: 'CSSSstyleDeclaration' ஆப்ஜெக்ட், ஹெட் பிரிவில் வரையறுக்கப்பட்ட CSS ஸ்டைலிங் பண்புகளைக் கொண்டுள்ளது.
தொடரியல் (ஒரு பாணி சொத்தை அமைக்கவும்)
உறுப்பு. பாணி . சொத்து = மதிப்புமேலே உள்ள தொடரியல் படி, ' பாணி 'சொத்து ஒரு அளவுருவை மட்டுமே ஆதரிக்கிறது' மதிப்பு ” என்பது குறிப்பிடப்பட்ட ஸ்டைலிங் சொத்தின் மதிப்பைக் குறிக்கிறது.
தொடரியல் (ஒரு பாணி சொத்தை திரும்பவும்)
உறுப்பு. பாணி . சொத்து'ஸ்டைல்' சொத்தின் மேலே விவாதிக்கப்பட்ட தொடரியல்களை நடைமுறையில் செயல்படுத்துவோம்.
எடுத்துக்காட்டு 1: ஒரு குறிப்பிட்ட HTML உறுப்புகளின் நிறத்தை அமைக்க 'ஸ்டைல்' பண்பைப் பயன்படுத்தவும்
இந்த எடுத்துக்காட்டு '' இன் அடிப்படை தொடரியல் பொருந்தும். பாணி 'ஸ்டைல்' சொத்தின் மதிப்பை அமைப்பதற்கான சொத்து, அதாவது குறிப்பிட்ட HTML உறுப்பின் நிறம் மாறும்.
HTML குறியீடு
முதலில், கொடுக்கப்பட்ட HTML குறியீட்டைப் பார்க்கவும்:
< h2 > ஜாவாஸ்கிரிப்டில் உடை பண்புகளைப் பயன்படுத்தவும் h2 >
< h3 ஐடி = 'H3' > இரண்டாவது துணைத்தலைப்பு. h3 >
மேலே உள்ள குறியீடு வரிகளில்:
- ' ” HTML குறிச்சொல் முதல் துணைத்தலைப்பைக் குறிப்பிடுகிறது.
- ' ” குறிச்சொல் “H3” ஒதுக்கப்பட்ட ஐடியுடன் நிலை 3 இன் இரண்டாவது துணைத் தலைப்பை உருவாக்குகிறது.
ஜாவாஸ்கிரிப்ட் குறியீடு
அடுத்து, குறிப்பிடப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பின்பற்றவும்:
< கையால் எழுதப்பட்ட தாள் >ஆவணம். getElementById ( 'H3' ) . பாணி . நிறம் = 'பச்சை' ;
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு துணுக்கில், ' document.getElementById() 'முறை சேர்க்கப்பட்டுள்ளது' 'உறுப்பு அதன் ஐடி வழியாக' H3 'குறிப்பிட்டதை அமைக்க' நிறம் 'உறுப்பின் பண்பு மதிப்பு' வழியாக நடை.நிறம் ”சொத்து.
வெளியீடு
இலக்கு HTML உறுப்பு காட்சி பிரதிநிதித்துவம் 'ஸ்டைல்' சொத்தை பயன்படுத்தி அதற்கேற்ப அமைக்கப்பட்டதாக வெளியீடு காட்டுகிறது.
எடுத்துக்காட்டு 2: பயன்படுத்தப்பட்ட 'பாணி' பண்புக்கூறின் மதிப்பைப் பெற 'ஸ்டைல்' சொத்தைப் பயன்படுத்தவும்
இந்த எடுத்துக்காட்டில், 'ஸ்டைல்' பண்பு அதன் பொதுமைப்படுத்தப்பட்ட தொடரியலைப் பயன்படுத்தி HTML உறுப்பின் ஒதுக்கப்பட்ட 'பாணி' பண்புக்கூறைக் கண்டறிய உதவுகிறது (ஒரு பாணி சொத்து திரும்பவும்).
HTML குறியீடு
HTML குறியீடு இங்கே குறிப்பிடப்பட்டுள்ளது:
< h2 > ஜாவாஸ்கிரிப்டில் உடை பண்புகளைப் பயன்படுத்தவும் h2 >< h3 ஐடி = 'H3' பாணி = 'பின்னணி நிறம்:ஆரஞ்சு;' > இரண்டாவது துணைத்தலைப்பு பின்னணி வண்ணத்தின் மதிப்பு : h3 >
< h4 ஐடி = 'டெமோ' > h4 >
இந்த குறியீட்டில்:
- ' '
' HTML உறுப்பின் பின்னணி நிறத்தை அமைக்கும் 'ஸ்டைல்' பண்புக்கூறை HTML டேக் பயன்படுத்துகிறது.
- ' 'குறிச்சொல் ஒரு ஐடியைக் கொண்ட நிலை 4 இன் வெற்று துணைத் தலைப்பை உருவாக்குகிறது' டெமோ ”.
ஜாவாஸ்கிரிப்ட் குறியீடு
இப்போது, கொடுக்கப்பட்டுள்ள ஜாவாஸ்கிரிப்ட் குறியீட்டைப் பாருங்கள்:
< கையால் எழுதப்பட்ட தாள் >நிலையான மதிப்பு = ஆவணம். getElementById ( 'H3' ) . பாணி . பின்னணி நிறம் ;
ஆவணம். getElementById ( 'டெமோ' ) . உள் HTML = மதிப்பு ;
கையால் எழுதப்பட்ட தாள் >
மேலே எழுதப்பட்ட குறியீட்டில்:
- மாறி' மதிப்பு '' உடன் அறிவிக்கப்படுகிறது நிலையான 'பயன்படுத்தும் முக்கிய சொல்' document.getElementById() '
' உறுப்பை அதன் ஐடியைப் பயன்படுத்தி, பயன்படுத்தப்பட்ட 'ஸ்டைல்' பண்புக்கூறின் மதிப்பைப் பெறுவதற்கும், 'ஸ்டைல்' பண்பு வழியாக '
' என்ற உறுப்பிற்குப் பயன்படுத்துவதற்கும் முறை.
- சேர்க்கப்பட்ட வெற்று '
' உறுப்பை அணுகவும் 'document.getElementById()' முறை மீண்டும் பயன்படுத்தப்படுகிறது மற்றும் பெறப்பட்ட HTML உறுப்புக்கு எதிராக ஒதுக்கப்பட்ட 'ஸ்டைல்' பண்புக்கூறின் மதிப்பைக் காண்பிக்கவும் மற்றும் '' வழியாக துணைத் தலைப்பாகச் சேர்க்கவும் உள் HTML ”சொத்து.
வெளியீடு
வெளியீடு உறுப்புக்கு பின்னணி வண்ணத்தைப் பயன்படுத்துகிறது மற்றும் 'ஸ்டைல்' பண்புக்கூறின் மதிப்பும் அதற்கேற்ப திரும்பும்.
முடிவுரை
ஜாவாஸ்கிரிப்ட் பயன்படுத்துகிறது ' பாணி HTML DOM உறுப்பின் இன்லைன் 'ஸ்டைல்' பண்புகளை ஒதுக்க மற்றும் திரும்ப வழங்குவதற்கான சொத்து. அதற்கேற்ப விரும்பிய செயல்பாட்டைப் பயன்படுத்த கூடுதல் 'மதிப்பு' தேவைப்படுகிறது. அமைத்தல் மற்றும் மீட்டெடுப்பதைத் தவிர, தற்போதுள்ள 'பாணி' பண்புக்கூறை மாற்றுவதும் நன்மை பயக்கும். இந்த வழிகாட்டி HTML DOM உறுப்பு பாணி சொத்தின் முக்கிய நோக்கம், வேலை மற்றும் நடைமுறைச் செயலாக்கத்தை விளக்கியது.