ஒவ்வொரு பயன்பாட்டிற்கும் அல்லது வலைப்பக்கத்திற்கும் உரை மிக முக்கியமான மற்றும் மிகவும் புலப்படும் சொத்தாக உள்ளது, உரையின் பயன்பாடு இல்லாமல் படைப்பாளி தனது எண்ணங்களை முழுமையாக தெரிவிக்கவோ அல்லது தகவலை சரியாக வழங்கவோ முடியாது. அதன் தேவை மற்றும் முக்கியத்துவம் காரணமாக, அதன் ஸ்டைலிங் பெரும்பாலான டெவலப்பர்களுக்கு ஒரு கனவாக மாறுகிறது. நிலையான உரைக்கு, CSS பண்புகள் மற்றும் அதன் கட்டமைப்பானது நிறைய உதவுகிறது, ஆனால் இன்னும், மாறும் வகையில் பாணியைப் பயன்படுத்தக்கூடிய ஒரு சொத்து தேவை. அதிர்ஷ்டவசமாக, '' என்ற பெயரைக் கொண்ட ஜாவாஸ்கிரிப்ட் மூலம் இந்த சொத்து வழங்கப்படுகிறது. உரை அலங்காரம் ”.
இந்த வலைப்பதிவு HTML உறுப்பின் மீது நடைகளைப் பயன்படுத்துவதற்கான செயல்முறையை textDecoration பண்பு வழியாக வழங்கும்.
HTML DOM பாணி உரை அலங்காரப் பண்புகளைப் பயன்படுத்தி ஸ்டைல்களைப் பயன்படுத்துவது எப்படி?
DOM பாணி ' உரை அலங்காரம் 'சொத்து அடிப்படையில் சேர்ப்பது போன்ற ஸ்டைலிங் செய்கிறது' அடிக்கோடிடு', 'மேல்வரி', 'வரி-மூலம்', மற்றும் 'பிளிங்க் 'தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு மேல். இந்த சொத்து ' என அமைக்கப்படும் போது எதுவும் இல்லை ”ஆங்கர் டேக் போன்ற அந்த உறுப்பின் மீது பயன்படுத்தப்படும் இயல்புநிலை ஸ்டைலை நீக்குகிறது.
தொடரியல்
DOM பாணி உரை அலங்காரப் பண்புக்கான தொடரியல்:
eleObj. பாணி . உரை அலங்காரம் = 'இல்லை|ஓவர்லைன்|பிளிங்க்|அண்டர்லைன்|இனிஷியல்|லைன்-த்ரூ|மரபு
'க்கு ஒதுக்கக்கூடிய மதிப்புகள் பற்றிய விரைவான யோசனையைப் பெற கீழே உள்ள அட்டவணையைப் பார்வையிடவும். உரை அலங்காரம் 'சொத்து:
| மதிப்பு | விளக்கம் |
|---|---|
| எதுவும் இல்லை | அனைத்து முன் வரையறுக்கப்பட்ட ஸ்டைலிங் அகற்றும் எளிய வடிவத்தில் உரையை மாற்றவும்; அது இயல்புநிலை. |
| மேலோட்டம் | தேர்ந்தெடுக்கப்பட்ட உரையின் மேல் அல்லது மேலே ஒரு வரியைச் செருகும். |
| கண் சிமிட்டும் | உரையை ஒளிரச் செய்கிறது ஆனால் எல்லா இணைய உலாவிகளாலும் ஆதரிக்கப்படாது. |
| அடிக்கோடு | இது தேர்ந்தெடுக்கப்பட்ட உரையின் கீழ் அல்லது கீழே வரியை வைக்கிறது. |
| ஆரம்ப | பயன்படுத்தப்பட்ட சொத்தை அதன் இயல்புநிலை மதிப்பிற்கு அமைக்கவும், இது எங்கள் விஷயத்தில் இல்லை. |
| வரி வழியாக | வரியை உரையின் மையத்தில் அதாவது உரைக்கு இடையில் வைக்கவும். |
| நீங்கள் மரபுரிமை | ரூட் அல்லது தாய் உறுப்புக்கு பயன்படுத்தப்படும் சொத்தைப் பெறுகிறது. |
இப்போது, செயல்படுத்தும் செயல்முறை மற்றும் ஒவ்வொரு மதிப்பிற்கும் உரையில் அதன் விளைவைப் பார்ப்போம். உரை அலங்காரம் ”சொத்து.
எடுத்துக்காட்டு 1: “உரை அலங்காரம் = எதுவுமில்லை” சொத்து
நடைமுறை செயல்படுத்தல் ' உரை அலங்காரம் 'சொத்து மதிப்பு' எதுவும் இல்லை ” என்பது பின்வரும் குறியீட்டில் விளக்கப்படும்:
< உடல் >
< மையம் >
< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > லினக்ஸ் < / h1 >
< பொத்தானை கிளிக் செய்யவும் = 'பயன்படுத்துபவர்()' > விண்ணப்பிப்பவர் < / பொத்தானை >
< ப > textDecoration சொத்தின் மதிப்பு எதுவும் இல்லை என அமைக்கப்படும் போது: < / ப >
< h3 ஐடி = 'யூஸ்கேஸ்' பாணி = 'உரை-அலங்காரம்: மேலோட்டம்;' > இலக்கு உறுப்பு < / h3 >
< / மையம் >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு அப்ளையர்() {
document.getElementById('useCase').style.textDecoration = 'இல்லை';
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
மேலே கூறப்பட்ட குறியீட்டின் விளக்கம்:
- முதலில், '<' ஐப் பயன்படுத்தவும் பொத்தானை ஒரு பொத்தானை உருவாக்குவதற்கு >' குறிச்சொல்லிட்டு, அதற்கு ஒரு நிகழ்வு கேட்பவரை ஒதுக்கவும் கிளிக் செய்யவும் ”. இந்த நிகழ்வு கேட்பவர் '' என்ற ஜாவாஸ்கிரிப்ட் செயல்பாட்டைத் தூண்டுகிறது விண்ணப்பிப்பவர் ”.
- அடுத்து, இலக்கு உறுப்பை உருவாக்கவும் ' h3 'மற்றும் அதற்கு ஒரு தனித்துவமான ஐடியை ஒதுக்கவும்' பயன்பாட்டு வழக்கு ”. மேலும், CSS ஐப் பயன்படுத்தவும் ' உரை-அலங்காரம் 'சொத்து அதன் மதிப்பு' மேலோட்டம் '' உதவியுடன் பாணி ” பண்பு.
- இப்போது, '' ஐ உள்ளிடவும் விண்ணப்பிப்பவர் ()' செயல்பாடு உடல் மற்றும் அதன் ஐடி வழியாக இலக்கு உறுப்பு தேர்ந்தெடுக்கவும் ' பயன்பாட்டு வழக்கு 'மற்றும் பாணியை இணைக்கவும்' உரை அலங்காரம் ”சொத்து.
- அதன் பிறகு, சொத்தின் மதிப்பை ' எதுவும் இல்லை 'உறுப்பின் மீது முன் பயன்படுத்தப்பட்ட உரை-அலங்கார ஸ்டைலை அகற்ற.
மேலே உள்ள குறியீட்டை செயல்படுத்திய பிறகு வலைப்பக்கத்தின் பார்வை:
இலக்கு உறுப்பில் பயன்படுத்தப்படும் முன்-ஸ்டைலிங், '' மதிப்பை ஒதுக்குவதன் மூலம் அகற்றப்படுவதை வெளியீடு காட்டுகிறது. எதுவும் இல்லை ”.
எடுத்துக்காட்டு 2: “உரை அலங்காரம் = ஆரம்ப” சொத்து
கீழே உள்ள குறியீடு துணுக்கை செயல்படுத்துவதை விளக்குகிறது உரை அலங்காரம் 'சொத்து மதிப்பு போது' ஆரம்ப ” அதற்கு ஒதுக்கப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு விண்ணப்பிப்பவர் ( ) {
ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . பாணி . உரை அலங்காரம் = 'ஆரம்ப' ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீட்டின் தொகுப்பிற்குப் பிறகு உருவாக்கப்பட்ட வெளியீடு கீழே காட்டப்பட்டுள்ளது:
மேலே உள்ள வெளியீடு, உரை அலங்காரத்தின் மதிப்பு அதன் இயல்புநிலை மதிப்பாக அமைக்கப்பட்டுள்ளது என்பதைக் காட்டுகிறது ' எதுவும் இல்லை ” எனவே அனைத்து முன் ஸ்டைலிங் மாற்றப்பட்டது.
எடுத்துக்காட்டு 3: “உரை அலங்காரம் = மேலோட்டம்” சொத்து
கீழே உள்ள குறியீடு '' இன் நடைமுறைச் செயலாக்கத்தைக் காட்டுகிறது உரை அலங்காரம் 'சொத்து மதிப்பு போது' மேலோட்டம் ”அதற்கு வழங்கப்படுகிறது:
< உடல் >< மையம் >
< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > லினக்ஸ் < / h1 >
< பொத்தானை கிளிக் செய்யவும் = 'பயன்படுத்துபவர்()' > விண்ணப்பிப்பவர் < / பொத்தானை >
< ப > டெக்ஸ்டெக்கரேஷன் சொத்தின் மதிப்பு மேலோட்டமாக அமைக்கப்படும் போது: < / ப >
< h3 ஐடி = 'யூஸ்கேஸ்' > இலக்கு உறுப்பு < / h3 >
< / மையம் >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு அப்ளையர்() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம் கீழே கூறப்பட்டுள்ளது:
- முதலில், ' பொத்தான்' மற்றும் 'h3 'உறுப்பு அதே முறையில் உருவாக்கப்பட்டது மற்றும் CSS சொத்து மீது பயன்படுத்தப்படும் 'h3' உறுப்பு இப்போது அகற்றப்பட்டது.
- அடுத்து, உள்ளே ' விண்ணப்பிப்பவர் 'செயல்பாடு இலக்கு உறுப்பு தேர்ந்தெடுக்கப்பட்டது மற்றும் ' உரை அலங்காரம் 'சொத்து மதிப்பு' மேலோட்டம் ” உறுப்புக்கு ஒதுக்கப்பட்டுள்ளது.
மேலே உள்ள குறியீட்டை செயல்படுத்திய பின் வெளியீடு கீழே காட்டப்படும்:
வெளியீடு 'இன் விளைவைக் காட்டுகிறது உரைஅலங்காரம் = மேலோட்டம் ”உரைக்கு மேல் சொத்து.
எடுத்துக்காட்டு 4: “உரை அலங்காரம் = அடிக்கோடிட்டு” சொத்து
உரையின் நடைமுறைச் செயலாக்கத்தின் மதிப்பு ' அடிக்கோடு ''க்கு ஒதுக்கப்பட்டுள்ளது உரை அலங்காரம் 'சொத்து கீழே குறிப்பிடப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு விண்ணப்பிப்பவர் ( ) {
ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . பாணி . உரை அலங்காரம் = 'அடிக்கோடு' ;
}
கையால் எழுதப்பட்ட தாள் >
தொகுத்த பிறகு, வெளியீடு இப்படி இருக்கும்:
உரையின் அடிப்பகுதியில் வரி சேர்க்கப்பட்டுள்ளதை வெளியீடு காட்டுகிறது.
எடுத்துக்காட்டு 5: “உரை அலங்காரம் = வரி மூலம்” சொத்து
காட்சி செயல்படுத்தல் ' உரை அலங்காரம் 'சொத்து மதிப்பு' வரி வழியாக ” கீழே காட்டப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு விண்ணப்பிப்பவர் ( ) {
ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . பாணி . உரை அலங்காரம் = 'வரி வழியாக' ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீட்டிற்காக உருவாக்கப்பட்ட வெளியீடு கீழே காட்டப்படும்:
வெளியீடு '' செய்த விளைவைக் காட்டுகிறது வரி வழியாக ” இலக்கு உறுப்பு உரை மீது.
முடிவுரை
HTML DOM பாணி ' உரை அலங்காரம் ” பண்பு குறிப்பாக ஜாவாஸ்கிரிப்ட் வழியாக HTML உறுப்புகளின் ஸ்டைலிங் மூலம் உரை உறுப்புகளில் டைனமிக் ஸ்டைலிங்கைச் செயல்படுத்துகிறது. இதற்கு பல மதிப்புகள் ஒதுக்கப்படலாம் ' உரை அலங்காரம் ” ஸ்டைலிங்கின் பல்வேறு மாறுபாடுகளைச் செய்ய. இந்த மதிப்புகள் ' எதுவுமில்லை', 'மேலே வரி', 'அடிக்கோடு', 'வரி-மூலம்', 'ஆரம்ப', 'பிளிங்க்', மற்றும் 'இன்ஹெரிட்' ”. இந்த வலைப்பதிவு டெவலப்பர் டெக்ஸ்டெக்கரேஷன் பண்பைப் பயன்படுத்தி ஸ்டைல்களைப் பயன்படுத்துவதற்கான செயல்முறையை வெற்றிகரமாக விளக்கியுள்ளது.