టెక్స్ట్ అనేది ప్రతి అప్లికేషన్ లేదా వెబ్‌పేజీకి అత్యంత ముఖ్యమైన మరియు అత్యంత కనిపించే ఆస్తి, వచనాన్ని ఉపయోగించకుండా సృష్టికర్త తన ఆలోచనలను పూర్తిగా తెలియజేయలేరు లేదా సమాచారాన్ని సరిగ్గా అందించలేరు. దాని అవసరం మరియు ప్రాముఖ్యత కారణంగా, దీని స్టైలింగ్ కూడా చాలా మంది డెవలపర్‌లకు ఒక పీడకలగా మారుతుంది. స్టాటిక్ టెక్స్ట్ కోసం, CSS లక్షణాలు మరియు దాని ఫ్రేమ్‌వర్క్ చాలా సహాయపడతాయి, అయితే ఇప్పటికీ, డైనమిక్‌గా శైలికి వర్తించే ఆస్తి అవసరం. అదృష్టవశాత్తూ, ఈ ఆస్తి జావాస్క్రిప్ట్ ద్వారా అందించబడింది ' టెక్స్ట్ డెకరేషన్ ”.
ఈ బ్లాగ్ టెక్స్ట్ డెకరేషన్ ప్రాపర్టీ ద్వారా HTML మూలకంపై శైలులను వర్తింపజేసే విధానాన్ని అందిస్తుంది.
HTML DOM స్టైల్ టెక్స్ట్ డెకరేషన్ ప్రాపర్టీని ఉపయోగించి స్టైల్‌లను ఎలా అప్లై చేయాలి?
DOM శైలి ' టెక్స్ట్ డెకరేషన్ 'ప్రాపర్టీ ప్రాథమికంగా జోడించడం వంటి స్టైలింగ్‌ను నిర్వహిస్తుంది' అండర్లైన్', 'ఓవర్లైన్', 'లైన్-త్రూ' మరియు 'బ్లింక్' ” ఎంచుకున్న మూలకంపై. 'కి సెట్ చేసినప్పుడు ఈ ఆస్తి ఏదీ లేదు ” యాంకర్ ట్యాగ్ వంటి మూలకంపై వర్తించే డిఫాల్ట్ స్టైలింగ్‌ను తొలగిస్తుంది.
వాక్యనిర్మాణం
DOM స్టైల్ టెక్స్ట్ డెకరేషన్ ప్రాపర్టీ కోసం సింటాక్స్:
eleObj. శైలి . టెక్స్ట్ డెకరేషన్ = 'ఏదీ లేదు|ఓవర్లైన్|బ్లింక్|అండర్లైన్|ఇనీషియల్|లైన్-త్రూ|హెరిట్'
'కి కేటాయించగల విలువల గురించి శీఘ్ర ఆలోచనను పొందడానికి క్రింది పట్టికను సందర్శించండి టెక్స్ట్ డెకరేషన్ 'ఆస్తి:
| విలువ | వివరణ |
|---|---|
| ఏదీ లేదు | ముందుగా నిర్వచించిన అన్ని స్టైలింగ్‌లను తీసివేసి సాదా ఆకృతిలోకి వచనాన్ని మార్చండి; అది డిఫాల్ట్. |
| ఓవర్లైన్ | ఎంచుకున్న వచనం పైన లేదా పైన లైన్‌ను ఇన్‌సర్ట్ చేస్తుంది. |
| రెప్పపాటు | వచనాన్ని బ్లింక్ చేస్తుంది కానీ అన్ని వెబ్ బ్రౌజర్‌లు దీనికి మద్దతు ఇవ్వవు. |
| అండర్లైన్ | ఇది ఎంచుకున్న వచనం క్రింద లేదా దిగువన లైన్‌ను ఉంచుతుంది. |
| ప్రారంభ | వర్తించే ప్రాపర్టీని దాని డిఫాల్ట్ విలువకు సెట్ చేయండి, అది మా విషయంలో ఏదీ లేదు. |
| లైన్-త్రూ | టెక్స్ట్ మధ్యలో అంటే టెక్స్ట్ మధ్యలో లైన్ ఉంచండి. |
| మీరు వారసత్వంగా | రూట్ లేదా పేరెంట్ ఎలిమెంట్‌కు వర్తించే ఆస్తిని వారసత్వంగా పొందుతుంది. |
ఇప్పుడు, ' యొక్క ప్రతి విలువ కోసం అమలు ప్రక్రియ మరియు టెక్స్ట్‌పై దాని ప్రభావం గురించి చూద్దాం. టెక్స్ట్ డెకరేషన్ ”ఆస్తి.
ఉదాహరణ 1: “టెక్స్ట్ డెకరేషన్ = ఏదీ లేదు” ప్రాపర్టీ
యొక్క ఆచరణాత్మక అమలు ' టెక్స్ట్ డెకరేషన్ 'ఆస్తి విలువ' ఏదీ లేదు ” అనేది క్రింది కోడ్‌లో వివరించబడుతుంది:
< శరీరం >
< కేంద్రం >
< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linux < / h1 >
< బటన్ క్లిక్ చేయండి = 'అప్లియర్()' > దరఖాస్తుదారు < / బటన్ >
< p > టెక్స్ట్ డెకరేషన్ ప్రాపర్టీ విలువ దేనికీ సెట్ చేయబడినప్పుడు: < / p >
< h3 id = 'యూజ్కేస్' శైలి = 'టెక్స్ట్-డెకరేషన్: ఓవర్లైన్;' > టార్గెటెడ్ ఎలిమెంట్ < / h3 >
< / కేంద్రం >
< స్క్రిప్ట్ >
ఫంక్షన్ అప్లియర్() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / స్క్రిప్ట్ >
< / శరీరం >
పైన పేర్కొన్న కోడ్ యొక్క వివరణ:
- ముందుగా, “<ని ఉపయోగించండి బటన్ బటన్‌ని సృష్టించడానికి >' ట్యాగ్ చేయండి మరియు దానికి '' యొక్క ఈవెంట్ లిజర్‌ను కేటాయించండి క్లిక్ చేయండి ”. ఈ ఈవెంట్ లిజనర్ '' పేరుతో జావాస్క్రిప్ట్ ఫంక్షన్‌ను ట్రిగ్గర్ చేస్తుంది దరఖాస్తుదారు ”.
- తర్వాత, లక్షిత మూలకాన్ని సృష్టించండి ' h3 'మరియు దానికి ఒక ప్రత్యేక ఐడిని కేటాయించండి' యూజ్కేస్ ”. అలాగే, CSSని వర్తింపజేయండి” వచన-అలంకరణ 'ఆస్తి దాని విలువ' ఓవర్లైన్ '' సహాయంతో శైలి ' గుణం.
- ఇప్పుడు, 'ని నమోదు చేయండి దరఖాస్తుదారు ()” ఫంక్షన్ బాడీ మరియు దాని ఐడి ద్వారా లక్ష్య మూలకాన్ని ఎంచుకోండి “ యూజ్కేస్ 'మరియు శైలిని జోడించు' టెక్స్ట్ డెకరేషన్ ”ఆస్తి.
- ఆ తర్వాత, ఆస్తికి '' విలువను కేటాయించండి ఏదీ లేదు ” ఎలిమెంట్‌పై ముందుగా వర్తించే ఏదైనా టెక్స్ట్-డెకరేషన్ స్టైలింగ్‌ని తీసివేయడానికి.
పై కోడ్‌ని అమలు చేసిన తర్వాత వెబ్‌పేజీ వీక్షణ:
టార్గెటెడ్ ఎలిమెంట్‌పై వర్తించే ప్రీ-స్టైలింగ్‌ని అవుట్పుట్ చూపిస్తుంది, దానికి '' విలువను కేటాయించడం ద్వారా తీసివేయబడుతుంది ఏదీ లేదు ”.
ఉదాహరణ 2: “టెక్స్ట్ డెకరేషన్ = ఇనిషియల్” ప్రాపర్టీ
దిగువ కోడ్ స్నిప్పెట్ '' అమలును వివరిస్తుంది టెక్స్ట్ డెకరేషన్ 'ఆస్తి విలువ ఉన్నప్పుడు' ప్రారంభ ” దానికి కేటాయించబడింది:
< స్క్రిప్ట్ >ఫంక్షన్ దరఖాస్తుదారు ( ) {
పత్రం. getElementById ( 'యూజ్కేస్' ) . శైలి . టెక్స్ట్ డెకరేషన్ = 'ప్రారంభ' ;
}
స్క్రిప్ట్ >
పై కోడ్ యొక్క సంకలనం తర్వాత ఉత్పత్తి చేయబడిన అవుట్పుట్ క్రింద చూపబడింది:
పై అవుట్పుట్ టెక్స్ట్ డెకరేషన్ విలువ దాని డిఫాల్ట్ విలువకు సెట్ చేయబడిందని చూపిస్తుంది, ఇది “ ఏదీ లేదు ”అందుకే అన్ని ప్రీ-స్టైలింగ్ తిరిగి మార్చబడింది.
ఉదాహరణ 3: “టెక్స్ట్ డెకరేషన్ = ఓవర్లైన్” ప్రాపర్టీ
దిగువ కోడ్ '' యొక్క ఆచరణాత్మక అమలును చూపుతుంది టెక్స్ట్ డెకరేషన్ 'ఆస్తి విలువ ఉన్నప్పుడు' ఓవర్లైన్ ” దానికి అందించబడింది:
< శరీరం >< కేంద్రం >
< h1 శైలి = 'రంగు: కాడెట్బ్లూ;' > Linux < / h1 >
< బటన్ క్లిక్ చేయండి = 'అప్లియర్()' > దరఖాస్తుదారు < / బటన్ >
< p > టెక్స్ట్ డెకరేషన్ ప్రాపర్టీ విలువ ఓవర్‌లైన్‌కి సెట్ చేయబడినప్పుడు: < / p >
< h3 id = 'యూజ్కేస్' > టార్గెటెడ్ ఎలిమెంట్ < / h3 >
< / కేంద్రం >
< స్క్రిప్ట్ >
ఫంక్షన్ అప్లియర్() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / స్క్రిప్ట్ >
< / శరీరం >
పై కోడ్ యొక్క వివరణ క్రింద పేర్కొనబడింది:
- మొదట, ' బటన్' మరియు 'h3 ” మూలకం అదే పద్ధతిలో సృష్టించబడింది మరియు CSS ఆస్తిపై వర్తించబడుతుంది 'h3' మూలకం ఇప్పుడు తీసివేయబడింది.
- తరువాత, లోపల ' దరఖాస్తుదారు ' లక్ష్యం చేయబడిన మూలకం ఎంపిక చేయబడింది మరియు ' టెక్స్ట్ డెకరేషన్ 'ఆస్తి విలువ' ఓవర్లైన్ ” మూలకానికి కేటాయించబడింది.
పై కోడ్ అమలు చేసిన తర్వాత అవుట్పుట్ క్రింద ప్రదర్శించబడుతుంది:
అవుట్పుట్ '' యొక్క ప్రభావాన్ని చూపుతుంది textDecoration = ఓవర్లైన్ ” వచనం మీద ఆస్తి.
ఉదాహరణ 4: “టెక్స్ట్ డెకరేషన్ = అండర్లైన్” ప్రాపర్టీ
' విలువ ఉన్నప్పుడు టెక్స్ట్ యొక్క ఆచరణాత్మక అమలు అండర్లైన్ ''కి కేటాయించబడింది టెక్స్ట్ డెకరేషన్ 'ఆస్తి క్రింద పేర్కొనబడింది:
< స్క్రిప్ట్ >ఫంక్షన్ దరఖాస్తుదారు ( ) {
పత్రం. getElementById ( 'యూజ్కేస్' ) . శైలి . టెక్స్ట్ డెకరేషన్ = 'అండర్లైన్' ;
}
స్క్రిప్ట్ >
సంకలనం తరువాత, అవుట్పుట్ ఇలా కనిపిస్తుంది:
టెక్స్ట్ దిగువన లైన్ జోడించబడిందని అవుట్పుట్ చూపిస్తుంది.
ఉదాహరణ 5: “టెక్స్ట్ డెకరేషన్ = లైన్-త్రూ” ప్రాపర్టీ
దృశ్య అమలు టెక్స్ట్ డెకరేషన్ 'ఆస్తి విలువ' లైన్-త్రూ ” క్రింద చూపబడింది:
< స్క్రిప్ట్ >ఫంక్షన్ దరఖాస్తుదారు ( ) {
పత్రం. getElementById ( 'యూజ్కేస్' ) . శైలి . టెక్స్ట్ డెకరేషన్ = 'లైన్-త్రూ' ;
}
స్క్రిప్ట్ >
ఎగువ కోడ్ కోసం రూపొందించబడిన అవుట్పుట్ క్రింద ప్రదర్శించబడుతుంది:
అవుట్పుట్ ' ద్వారా చేసిన ప్రభావాన్ని చూపుతుంది లైన్-త్రూ ” లక్షిత మూలకం వచనంపై.
ముగింపు
HTML DOM శైలి ' టెక్స్ట్ డెకరేషన్ ” ప్రాపర్టీ ప్రత్యేకంగా టెక్స్ట్ ఎలిమెంట్స్‌పై డైనమిక్ స్టైలింగ్ చేయడానికి జావాస్క్రిప్ట్ ద్వారా HTML మూలకాల స్టైలింగ్‌తో వ్యవహరిస్తుంది. దీనికి బహుళ విలువలను కేటాయించవచ్చు ' టెక్స్ట్ డెకరేషన్ స్టైలింగ్ యొక్క విభిన్న వైవిధ్యాలను నిర్వహించడానికి. ఈ విలువలు ' ఏదీ లేదు', 'ఓవర్లైన్', 'అండర్లైన్', 'లైన్-త్రూ', 'ఇనిషియల్', 'బ్లింక్' మరియు 'హెరిట్' ”. టెక్స్ట్ డెకరేషన్ ప్రాపర్టీని ఉపయోగించి డెవలపర్ స్టైల్‌లను వర్తింపజేయగల ప్రక్రియను ఈ బ్లాగ్ విజయవంతంగా వివరించింది.