ఈ అధ్యయనం జావాస్క్రిప్ట్‌లో టెక్స్ట్ రంగును మార్చే పద్ధతులను వివరిస్తుంది.
జావాస్క్రిప్ట్‌లో టెక్స్ట్ రంగును ఎలా మార్చాలి?
జావాస్క్రిప్ట్‌లో టెక్స్ట్ రంగును మార్చడానికి, దిగువ పేర్కొన్న ముందే నిర్వచించిన జావాస్క్రిప్ట్ పద్ధతులను ఉపయోగించండి:
ఈ పద్ధతులను ఒక్కొక్కటిగా వివరిద్దాం.
విధానం 1: getElementById() పద్ధతితో style.color ప్రాపర్టీని ఉపయోగించి టెక్స్ట్ రంగును మార్చండి
టెక్స్ట్ యొక్క రంగును మార్చడానికి, మీరు ' getElementById() 'తో పద్ధతి' శైలి.రంగు ”ఆస్తి. అటువంటి దృష్టాంతంలో, టెక్స్ట్ మూలకాన్ని getElementById() పద్ధతిని ఉపయోగించి యాక్సెస్ చేయవచ్చు మరియు ఆపై HTML style.color ఆస్తి సహాయంతో రంగు లక్షణాన్ని వర్తింపజేయవచ్చు.
వాక్యనిర్మాణం
getElementById() పద్ధతి సహాయంతో కలర్ ప్రాపర్టీని ఉపయోగించడం ద్వారా టెక్స్ట్ రంగును మార్చడానికి ఇచ్చిన సింటాక్స్‌ని ఉపయోగించండి:
పత్రం. getElementById ( 'id' ) . శైలి . రంగు = 'రంగు' ;ది ' id ” అనేది టెక్స్ట్ ఎలిమెంట్‌ను యాక్సెస్ చేయడానికి పేర్కొనబడిన మూలకం యొక్క id, ఆపై style.color ఆస్తిని ఉపయోగించి దాని రంగును మార్చండి.
పేర్కొన్న భావనను అర్థం చేసుకోవడానికి దిగువ ఉదాహరణ వైపు వెళ్ళండి!
ఉదాహరణ
మొదట, మేము ఉపయోగించి శీర్షికను సృష్టిస్తాము ఐడిని ట్యాగ్ చేసి కేటాయించండి' id ” అది h4 మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది, ఆపై, “ అనే ఫంక్షన్‌ను ప్రారంభించే బటన్‌ను సృష్టించండి రంగు మార్చు() ” జోడించిన బటన్ యొక్క ఆన్‌క్లిక్ ఈవెంట్ ట్రిగ్గర్ అయినప్పుడు JavaScript(JS) ఫైల్‌లో నిర్వచించబడింది:
< h4 id = 'id' > LinuxHintకి స్వాగతం h4 >< బటన్ రకం = 'బటన్' క్లిక్ చేయండి = 'రంగు మార్చండి()' > మ్యాజిక్‌ని చూడటానికి క్లిక్ చేయండి బటన్ >
JS ఫైల్‌లో, “” అనే ఫంక్షన్‌ను నిర్వచించండి రంగు మార్చు() ” మరియు హెడ్డింగ్‌ని getElementById() పద్ధతికి పంపడం ద్వారా శీర్షికను పొందండి మరియు దాని రంగును మార్చండి:
ఫంక్షన్ రంగు మార్పు ( ) {పత్రం. getElementById ( 'id' ) . శైలి . రంగు = 'ఎరుపు' ;
}
చివరగా, HTML ఫైల్‌లోని src ట్యాగ్‌ని ఉపయోగించి జావాస్క్రిప్ట్ ఫైల్ యొక్క మూలాన్ని పేర్కొనండి:
< స్క్రిప్ట్ src = './JSfile.js' > స్క్రిప్ట్ >జోడించిన బటన్‌ను క్లిక్ చేసినప్పుడు, టెక్స్ట్ మూలకం దాని రంగును ''కి మార్చినట్లు అవుట్‌పుట్ నుండి చూడవచ్చు. ఎరుపు ”:
ఇతర పద్ధతిని పరిశీలిద్దాం!
విధానం 2: querySelector() పద్ధతితో style.color ప్రాపర్టీని ఉపయోగించి టెక్స్ట్ రంగును మార్చండి
మీరు “ని ఉపయోగించి టెక్స్ట్ రంగును కూడా మార్చవచ్చు క్వెరీ సెలెక్టర్() ” శైలి.రంగు ఆస్తితో కూడిన పద్ధతి. ఇది id లేదా కేటాయించిన తరగతి రెండింటితో మూలకాన్ని యాక్సెస్ చేస్తుంది, అయితే getElementById() పద్ధతి దాని కేటాయించిన idతో మూలకాన్ని పొందుతుంది.
వాక్యనిర్మాణం
querySelector() పద్ధతి సహాయంతో కలర్ ప్రాపర్టీని ఉపయోగించి వచన రంగును మార్చడానికి క్రింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:
పత్రం. querySelector ( 'ఐడి/తరగతి పేరు' ) . శైలి . రంగు = 'రంగు' ;ఉదాహరణ
ఇక్కడ, మేము ఉపయోగిస్తాము ' అనే తరగతితో పేరాను జోడించడానికి ట్యాగ్ చేయండి రంగు ”, అది
మూలకాన్ని మరియు జావాస్క్రిప్ట్‌ని పిలిచే బటన్‌ని యాక్సెస్ చేయడానికి సహాయపడుతుంది” రంగు మార్చు() ” దాని ఆన్‌క్లిక్ ఈవెంట్ ట్రిగ్గర్ చేయబడినప్పుడు పద్ధతి:
< p తరగతి = 'రంగు' > LinuxHintకి స్వాగతం p >< బటన్ క్లిక్ చేయండి = 'రంగు మార్చండి()' > మ్యాజిక్‌ని చూడటానికి క్లిక్ చేయండి బటన్ >
నిర్వచనంలో ' రంగు మార్చు() 'పద్ధతి, మేము 'ని పిలుస్తాము క్వెరీ సెలెక్టర్() ” క్లాస్ పేరును డాట్(.)తో పాస్ చేయడం ద్వారా ఎలిమెంట్ దాని తరగతి పేరు ఆధారంగా యాక్సెస్ చేయబడిందని సూచిస్తుంది, ఆపై దానిపై రంగు లక్షణాన్ని వర్తింపజేయండి:
ఫంక్షన్ రంగు మార్పు ( ) {పత్రం. querySelector ( '.రంగు' ) . శైలి . రంగు = 'మెజెంటా' ;
}
అయితే, HTML మూలకంలో ఐడిని ఉపయోగించడానికి మరియు querySelector() పద్ధతిని ఉపయోగించి దాన్ని యాక్సెస్ చేయడానికి, ' # 'ఐడి పేరుతో సంకేతం:
పత్రం. querySelector ( '#రంగు' ) . శైలి . రంగు = 'మెజెంటా' ;అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో వచన రంగును మార్చడానికి మేము సరళమైన విధానాన్ని సేకరించాము.
ముగింపు
టెక్స్ట్ రంగును మార్చడానికి, మీరు getElementById() పద్ధతి లేదా querySelector() పద్ధతి సహాయంతో style.color ప్రాపర్టీని ఉపయోగించవచ్చు. getElementById() పద్ధతి దాని కేటాయించిన id ఆధారంగా HTML మూలకాన్ని యాక్సెస్ చేయడానికి ఉపయోగించబడుతుంది, అయితే querySelector() పద్ధతి వరుసగా (#) లేదా (.) సంకేతాలను పేర్కొనడం ద్వారా కేటాయించిన id లేదా తరగతి ఆధారంగా మూలకాన్ని యాక్సెస్ చేస్తుంది. ఈ అధ్యయనం జావాస్క్రిప్ట్‌లో టెక్స్ట్ రంగును మార్చడానికి సులభమైన విధానాన్ని వివరించింది.