జావాస్క్రిప్ట్‌లో, ఇంటర్‌ఫేస్‌ల కోసం సాధారణంగా మెరుగ్గా పనిచేసే డార్క్ బ్యాక్‌గ్రౌండ్‌ల వంటి ఆకర్షణీయమైన లేఅవుట్ అవసరమయ్యే వెబ్ పేజీలు ఉన్నాయి. అదేవిధంగా, తెలుపు నేపథ్యాలు పాఠకులను కంటెంట్‌పై దృష్టి పెట్టేలా చేస్తాయి, కాబట్టి న్యూస్ పోర్టల్‌లు లేదా బ్లాగ్‌లు ముదురు వచనంతో తులనాత్మకంగా తేలికపాటి నేపథ్యాన్ని ఉపయోగిస్తాయి. అటువంటి సందర్భాలలో, డాక్యుమెంట్ డిజైన్‌ని ఫార్మాటింగ్ చేయడంలో మరియు మెరుగుపరచడంలో జావాస్క్రిప్ట్ చాలా ఉపయోగపడుతుంది.
ఈ వ్యాసం JavaScriptలో నేపథ్య చిత్రాన్ని మార్చే పద్ధతులను చర్చిస్తుంది.
జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని ఎలా మార్చాలి?
జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని మార్చడానికి, ఈ క్రింది విధానాలను ఉపయోగించవచ్చు:
- ' నేపథ్య చిత్రం 'పై ఆస్తి' DOM ”.
- ' getElementById() 'పద్ధతి మరియు' నేపథ్య చిత్రం 'పై ఆస్తి' పేరా ”.
చర్చించిన పద్ధతులను ఒక్కొక్కటిగా పరిశీలించండి!
విధానం 1: DOMలో బ్యాక్‌గ్రౌండ్ ఇమేజ్ ప్రాపర్టీని ఉపయోగించి జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని మార్చండి.
ది ' నేపథ్య చిత్రం ” ఆస్తి పేర్కొన్న మూలకం యొక్క నేపథ్య చిత్రాన్ని సర్దుబాటు చేస్తుంది. బ్యాక్‌గ్రౌండ్ ఇమేజ్ ప్రాపర్టీని వర్తింపజేయడం మరియు ఆర్గ్యుమెంట్‌గా దాని మార్గాన్ని గుర్తించడం ద్వారా నేపథ్య చిత్రాన్ని పేర్కొనడం ద్వారా ఈ సాంకేతికతను అన్వయించవచ్చు.
వాక్యనిర్మాణం
పై వాక్యనిర్మాణంలో, “ URL ” అనేది చిత్రం యొక్క మార్గాన్ని సూచిస్తుంది.
ప్రదర్శన కోసం క్రింది ఉదాహరణను చూడండి.
ఉదాహరణ
ఈ ఉదాహరణలో, పేర్కొన్న విలువతో ఒక బటన్ చేర్చబడుతుంది మరియు “ క్లిక్ చేయండి ” ఈవెంట్ మళ్లింపు a
ఫంక్షన్ పేరు నేపథ్య చిత్రం():
ఇప్పుడు, ఒక ఫంక్షన్ ' నేపథ్య చిత్రం() 'ప్రకటించబడుతుంది మరియు' document.body.style.backgroundImage ” ప్రాపర్టీ దాని ఆర్గ్యుమెంట్‌లో పేర్కొన్న ఇమేజ్ పాత్‌ని ఉపయోగించి బ్యాక్‌గ్రౌండ్ ఇమేజ్‌ని యాక్సెస్ చేస్తుంది:
పై అమలు యొక్క అవుట్‌పుట్ క్రింది విధంగా ఉంటుంది:
విధానం 2: getElementById() పద్ధతిని మరియు పేరాలోని బ్యాక్‌గ్రౌండ్ ఇమేజ్ ప్రాపర్టీని ఉపయోగించి జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని మార్చండి
ది ' getElementById() ” పద్ధతి పేర్కొన్న విలువతో మూలకాన్ని అందిస్తుంది మరియు “ నేపథ్య చిత్రం ” ఆస్తి, పైన పేర్కొన్న విధంగా, దాని వాదనలో పేర్కొన్న నిర్దిష్ట మూలకం యొక్క నేపథ్య చిత్రాన్ని అందిస్తుంది. నిర్దిష్ట పేరా నేపథ్యంలో పేర్కొన్న రంగును మ్యాప్ చేయడానికి ఈ పద్ధతిని అన్వయించవచ్చు.
వాక్యనిర్మాణం
ఇక్కడ, ' అంశాలు ” అనేది మూలకం యొక్క idని సూచిస్తుంది.
పేర్కొన్న కాన్సెప్ట్‌ను బాగా అర్థం చేసుకోవడానికి క్రింది ఉదాహరణ ద్వారా వెళ్ళండి.
ఉదాహరణ
ముందుగా,
ట్యాగ్‌లో ఒక పేరాని చేర్చండి మరియు దానికి ఒక నిర్దిష్ట ఐడిని కేటాయించండి:
తర్వాత, మునుపటి పద్ధతిలో చర్చించినట్లుగా నేపథ్యచిత్రం() ఫంక్షన్‌ని యాక్సెస్ చేసే ఆన్‌క్లిక్ ఈవెంట్‌తో బటన్‌ను సృష్టించండి:
చివరగా, '' అనే ఫంక్షన్‌ను ప్రకటించండి నేపథ్య చిత్రం() ” అదేవిధంగా. ఇక్కడ, 'ని ఉపయోగించి నిర్వచించిన Idని యాక్సెస్ చేయండి getElementById() ” పద్ధతి మరియు దానిపై పేర్కొన్న నేపథ్య చిత్రాన్ని వర్తింపజేయండి. ఇది పేరా నేపథ్యంలో రంగు అమలుకు దారి తీస్తుంది:
అవుట్‌పుట్
జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని మార్చడానికి మేము సులభమైన పద్ధతిని సంకలనం చేసాము
ముగింపు
జావాస్క్రిప్ట్‌లో నేపథ్య చిత్రాన్ని మార్చడానికి, “ని వర్తింపజేయండి నేపథ్య చిత్రం 'పై ఆస్తి' DOM ” ఒక ఫంక్షన్‌ని ఉపయోగించి లేదా నిర్దిష్ట ఐడిని పొందడం ద్వారా మొత్తం వెబ్ పేజీలో పేర్కొన్న నేపథ్య చిత్రాన్ని వర్తింపజేయడం కోసం “ getElementById() 'పద్ధతి మరియు దరఖాస్తు' నేపథ్య చిత్రం 'పేర్కొన్న ఆస్తి' పేరా ”. ఈ బ్లాగ్ JavaScriptలో నేపథ్య చిత్రాలను మార్చే పద్ధతులను వివరిస్తుంది.