ఈ కథనం జావాస్క్రిప్ట్‌తో CSSని జోడించే పద్ధతులను వివరిస్తుంది.
జావాస్క్రిప్ట్‌తో CSSని ఎలా జోడించాలి?
జావాస్క్రిప్ట్‌లో, మీరు క్రింది పద్ధతులు లేదా విధానాలను ఉపయోగించి దాని శైలి ప్రాపర్టీని సవరించడం ద్వారా మూలకానికి CSS శైలులను జోడించవచ్చు:
- ఇన్‌లైన్ స్టైలింగ్‌గా స్టైల్ ప్రాపర్టీ
- setAtribute() పద్ధతి ఇన్‌లైన్ స్టైలింగ్‌గా
- గ్లోబల్ స్టైలింగ్‌గా createElement() పద్ధతి
విధానం 1: 'స్టైల్' ప్రాపర్టీని ఉపయోగించి జావాస్క్రిప్ట్‌తో CSSని జోడించండి
జావాస్క్రిప్ట్‌లో CSSని జోడించడం కోసం, “ని ఉపయోగించండి శైలి ”ఆస్తి. ఇది మూలకం యొక్క ఇన్‌లైన్ శైలులను యాక్సెస్ చేయడానికి మరియు మార్చడానికి ఉపయోగించబడుతుంది. ఇది ఒక మూలకం యొక్క ఇన్‌లైన్ శైలులను సూచించే వస్తువును అందిస్తుంది మరియు వ్యక్తిగత శైలి లక్షణాలను పొందడానికి లేదా సెట్ చేయడానికి అనుమతిస్తుంది.
వాక్యనిర్మాణం
జావాస్క్రిప్ట్‌లో CSS శైలిని జోడించడానికి, కింది వాక్యనిర్మాణం '' కోసం ఉపయోగించబడుతుంది. శైలి 'ఆస్తి:
మూలకం. శైలి ;
ఇక్కడ, ' మూలకం ” అనేది HTML మూలకానికి సూచన.
ఉదాహరణ
కింది ఉదాహరణలో, మేము జావాస్క్రిప్ట్ ఉపయోగించి బటన్లను స్టైల్ చేస్తాము. ముందుగా, మేము మూడు బటన్లను సృష్టిస్తాము మరియు వాటికి IDలను కేటాయిస్తాము, ఇది స్టైలింగ్ కోసం బటన్ ఎలిమెంట్‌లను యాక్సెస్ చేయడానికి సహాయపడుతుంది:
< బటన్ id = 'btn2' > తిరస్కరించు బటన్ >
< బటన్ id = 'btn3' > అంగీకరించు బటన్ >
స్టైలింగ్ చేయడానికి ముందు అవుట్‌పుట్ ఇలా ఉంటుంది:
ఇప్పుడు, జావాస్క్రిప్ట్‌లో “ని ఉపయోగించి ఈ బటన్లను స్టైల్ చేద్దాం శైలి ”ఆస్తి. ముందుగా, '' సహాయంతో అన్ని బటన్ ఎలిమెంట్‌లను వాటికి కేటాయించిన idలను ఉపయోగించి పొందండి getElementById() 'పద్ధతి:
అంగీకరించనివ్వండి = పత్రం. getElementById ( 'btn1' ) ;తిరస్కరించనివ్వండి = పత్రం. getElementById ( 'btn2' ) ;
అంగీకరించనివ్వండి = పత్రం. getElementById ( 'btn3' ) ;
'ని ఉపయోగించి ఈ బటన్లన్నింటికీ నేపథ్య రంగులను సెట్ చేయండి శైలి 'ఆస్తి:
అంగీకరిస్తున్నారు. శైలి . నేపథ్య రంగు = 'ఆకుపచ్చ' ;తిరస్కరించండి. శైలి . నేపథ్య రంగు = 'ఎరుపు' ;
అంగీకరించు. శైలి . నేపథ్య రంగు = 'పసుపు' ;
మీరు చూడగలిగినట్లుగా, బటన్లు 'ని ఉపయోగించి విజయవంతంగా స్టైల్ చేయబడ్డాయి. శైలి 'ఆస్తి:
విధానం 2: “setAttribute()” పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌తో CSSని జోడించండి
జావాస్క్రిప్ట్‌లో CSS స్టైలింగ్‌ని జోడించడానికి, “ని ఉపయోగించండి సెట్ అట్రిబ్యూట్() ” పద్ధతి. ఇది ఒక లక్షణాన్ని మరియు దాని విలువను HTML మూలకానికి సెట్ చేయడానికి లేదా జోడించడానికి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
కింది వాక్యనిర్మాణం ' కోసం ఉపయోగించబడుతుంది సెట్ అట్రిబ్యూట్() 'పద్ధతి:
ఉదాహరణ
ఇక్కడ, మేము జావాస్క్రిప్ట్‌లోని బటన్‌లపై ''ని ఉపయోగించి విభిన్న శైలులను సెట్ చేస్తాము. సెట్ అట్రిబ్యూట్() ” పద్ధతి. అన్ని బటన్ల సరిహద్దు వ్యాసార్థాన్ని 'కి సెట్ చేయండి .5 రెం ', మరియు ' యొక్క వచన రంగు అంగీకరిస్తున్నారు 'మరియు' తిరస్కరించు 'బటన్లు' తెలుపు ”.
తిరస్కరించండి. సెట్ అట్రిబ్యూట్ ( 'శైలి' , 'నేపథ్యం-రంగు: ఎరుపు; రంగు: తెలుపు; సరిహద్దు-వ్యాసార్థం: .5rem;' ) ;
అంగీకరించు. సెట్ అట్రిబ్యూట్ ( 'శైలి' , 'నేపథ్యం-రంగు: పసుపు; సరిహద్దు-వ్యాసార్థం: .5rem;' ) ;
అవుట్‌పుట్
విధానం 3: “createElement()” పద్ధతిని ఉపయోగించి జావాస్క్రిప్ట్‌తో CSSని జోడించండి
మీరు CSS స్టైలింగ్‌లో వలె జావాస్క్రిప్ట్ స్టైలింగ్‌లో తరగతులు లేదా ఐడిలను సృష్టించాలనుకుంటే, ' క్రియేట్ ఎలిమెంట్() ” పద్ధతి. ఇది డైనమిక్‌గా కొత్త మూలకాన్ని సృష్టించడానికి ఉపయోగించబడుతుంది. స్టైలింగ్ కోసం 'ని సృష్టించండి శైలి ” మూలకం ఈ పద్ధతిని ఉపయోగిస్తుంది. ది ' క్రియేట్ ఎలిమెంట్ ('శైలి') ” జావాస్క్రిప్ట్‌లోని పద్ధతి కొత్త స్టైల్ ఎలిమెంట్‌ను డైనమిక్‌గా సృష్టించడానికి ఉపయోగించబడుతుంది, ఇది వెబ్ పేజీకి CSS స్టైల్‌లను జోడించడానికి ఉపయోగించబడుతుంది.
వాక్యనిర్మాణం
ఇచ్చిన వాక్యనిర్మాణం ' కోసం ఉపయోగించబడుతుంది క్రియేట్ ఎలిమెంట్() 'పద్ధతి:
జావాస్క్రిప్ట్‌లో CSS శైలిని జోడించడానికి, ఇచ్చిన వాక్యనిర్మాణాన్ని ఉపయోగించండి:
స్థిరంగా శైలి = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'శైలి' ) ;ఆపై క్రింది వాక్యనిర్మాణాన్ని ఉపయోగించి హెడ్ ట్యాగ్‌లో శైలి మూలకాన్ని జత చేయండి:
పత్రం. తల . అనుబంధం చైల్డ్ ( శైలి ) ;ఇక్కడ, ' శైలి ” అనేది కొత్తగా సృష్టించబడిన శైలి మూలకానికి సూచన, మరియు “ డాక్యుమెంట్.హెడ్ ” అనేది HTML పత్రం యొక్క ప్రధాన అంశం.
ఉదాహరణ
ముందుగా, “ని ఉపయోగించి స్టైల్ ఎలిమెంట్‌ను సృష్టించండి క్రియేట్ ఎలిమెంట్() 'పద్ధతి:
ఇప్పుడు, 'ని సృష్టించండి btn 'అన్ని బటన్లు మరియు ఐడిలపై ఒకే స్టైలింగ్‌ని వర్తింపజేయడానికి తరగతి' btn1 ',' btn2 'మరియు' btn3 వ్యక్తిగత బటన్ స్టైలింగ్ కోసం:
శైలి. అంతర్గత HTML = `. btn {
ఫాంట్ - పరిమాణం : 1.1 రె ;
పాడింగ్ : 3px ;
మార్జిన్ : 2px ;
ఫాంట్ - కుటుంబం : లేకుండా - సెరిఫ్ ;
సరిహద్దు - వ్యాసార్థం : .5 రెం ;
}
#btn1 {
నేపథ్య - రంగు : ఆకుపచ్చ ;
రంగు : తెలుపు ;
}
#btn2 {
నేపథ్య - రంగు : ఎరుపు ;
రంగు : తెలుపు ;
}
#btn3 {
నేపథ్య - రంగు : పసుపు ;
}
` ;
ఇప్పుడు, “కి పారామీటర్‌గా పాస్ చేయడం ద్వారా స్టైల్ ఎలిమెంట్‌ను డాక్యుమెంట్ హెడ్‌కు జోడించండి appendChild() 'పద్ధతి:
పత్రం. తల . అనుబంధం చైల్డ్ ( శైలి ) ; అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో CSSని జోడించడం గురించి అంతే.
ముగింపు
జావాస్క్రిప్ట్‌తో CSSని జోడించడం కోసం, “తో సహా ఇన్‌లైన్ స్టైలింగ్‌ను ఉపయోగించండి శైలి 'ఆస్తి, మరియు' సెట్ అట్రిబ్యూట్() 'పద్ధతి, లేదా గ్లోబల్ స్టైలింగ్ ఉపయోగించి' క్రియేట్ ఎలిమెంట్() ” పద్ధతి. గ్లోబల్ స్టైలింగ్ మరింత ప్రభావవంతంగా ఉంటుంది, అయితే ఇన్‌లైన్ పద్ధతి సిఫార్సు చేయబడదు, ఎందుకంటే ఇది అప్లికేషన్ యొక్క శైలులను నిర్వహించడం కష్టతరం చేస్తుంది మరియు కోడ్ పునరావృతానికి దారితీస్తుంది. ఈ కథనం జావాస్క్రిప్ట్‌తో CSSని జోడించే పద్ధతులను వివరించింది.