दिलचस्प पोस्ट
सॉर्ट किए गए वैक्टर (MATLAB) के लिए खोज का तेज़ संस्करण <P: media> का उपयोग करके गतिशील सामग्री को कैसे बांधाएं? जावास्क्रिप्ट का उपयोग यूआरएल मान्य करने की कोशिश कर रहा है टॉगल चेकबॉक्सेस चालू / बंद करें कॉलम फ़ील्ड के लिए दो पंक्तियों के बीच अंतर कैसे प्राप्त करें? JS – setInterval () का उपयोग करने के बाद अंतराल कैसे साफ़ करें जावा में यूटीएफ -8 को आईएसओ -8859-1 में परिवर्तित करना – इसे एक बाइट के रूप में कैसे रखना है एक अस्थायी के एक उप वस्तु के लिए एक const संदर्भ बाध्य करने के बारे में PHP ऐरे से उच्चतम मूल्य प्राप्त करें जावा: आदिम डेटा प्रकारों का सरणी autobox नहीं करता है MySQL कंडीशनल सम्मिलित करें Joomla में jQuery का आयात करना विधानसभा सीमाओं में गतिशील गुमनाम प्रकार की वापसी / उपभोग jQuery गतिशील इनपुट सरणी मान्य करें सीएसएस एकल या एकाधिक पंक्ति ऊर्ध्वाधर संरेखण

मैं जावास्क्रिप्ट के साथ पृष्ठभूमि का रंग कैसे बदलूं?

जावास्क्रिप्ट का उपयोग कर किसी वेबपेज के पृष्ठभूमि का रंग स्वैप करने के लिए कोई भी सरल तरीका पता है?

Solutions Collecting From Web of "मैं जावास्क्रिप्ट के साथ पृष्ठभूमि का रंग कैसे बदलूं?"

जावास्क्रिप्ट प्रॉपर्टी को संशोधित करें document.body.style.background

उदाहरण के लिए:

 function changeBackground(color) { document.body.style.background = color; } <BODY onload="changeBackground('red');"> 

नोट: यह आपके पृष्ठ को एक साथ कैसे रखा जाता है, इस पर थोड़ा निर्भर करता है, उदाहरण के लिए यदि आप एक अलग पृष्ठभूमि रंग के साथ एक डिविटी कंटेनर का उपयोग कर रहे हैं तो आपको दस्तावेज़ बॉडी के बजाय उस का पृष्ठभूमि रंग संशोधित करने की आवश्यकता होगी।

आपको इसके लिए AJAX की ज़रूरत नहीं है, सिर्फ कुछ सादे जावा स्क्रिप्ट, पृष्ठभूमि तत्व को इस तरह से पृष्ठभूमि तत्व की स्थापना कर रहा है:

 document.body.style.backgroundColor = "#AA0000"; 

यदि आप ऐसा करना चाहते हैं जैसे कि सर्वर द्वारा शुरू किया गया है, तो आपको सर्वर का चुनाव करना होगा और फिर तदनुसार रंग बदलना होगा।

मैं पिछले पोस्टर से सहमत हूं कि className द्वारा रंग बदलना एक सुंदर दृष्टिकोण है मेरा तर्क यह है कि एक className को "आप पृष्ठभूमि या इस रंग का होना क्यों चाहते हैं" की परिभाषा के रूप में माना जा सकता है।

उदाहरण के लिए, यह लाल बनाने के लिए सिर्फ इसलिए नहीं कि आप इसे लाल चाहते हैं, लेकिन क्योंकि आप उपयोगकर्ताओं को एक त्रुटि के बारे में सूचित करना चाहते हैं। जैसे, क्लासनाम की स्थापना एएनआरआरएआरएचएसीएक्साइड AnErrorHasOccured पर मेरी पसंदीदा AnErrorHasOccured होगी।

सीएसएस में

 body.AnErrorHasOccured { background: #f00; } 

जावास्क्रिप्ट में:

 document.body.className = "AnErrorHasOccured"; 

इससे आप इस className अनुसार अधिक तत्वों को स्टाइल करने के विकल्प छोड़ className । और जैसे, एक className सेट className आप जिस तरह से पृष्ठ को एक निश्चित राज्य देते हैं

AJAX एक एसिंक्रोनस फ़ंक्शन में जावास्क्रिप्ट और एक्सएमएल का उपयोग कर सर्वर से डेटा प्राप्त कर रहा है। जब तक आप सर्वर से रंग कोड डाउनलोड नहीं करना चाहते हैं, तो ऐसा नहीं है कि आप वास्तव में क्या लक्ष्य कर रहे हैं!

लेकिन अन्यथा आप जावास्क्रिप्ट के साथ सीएसएस पृष्ठभूमि सेट कर सकते हैं। यदि आप jQuery की तरह एक ढांचा का उपयोग कर रहे हैं, तो ऐसा कुछ होगा:

 $('body').css('background', '#ccc'); 

अन्यथा, यह काम करना चाहिए:

 document.body.style.background = "#ccc"; 

सीएसएस दृष्टिकोण:

यदि आप निरंतर रंग देखना चाहते हैं, तो इस कोड का उपयोग करें:

 body{ background-color:black; animation: image 10s infinite alternate; animation:image 10s infinite alternate; animation:image 10s infinite alternate; } @keyframes image{ 0%{ background-color:blue; } 25%/{ background-color:red; } 50%{ background-color:green; } 75%{ background-color:pink; } 100%{ background-color:yellow; } } 

यदि आप इसे तेज या धीमे देखना चाहते हैं, तो 10 सेकेंड से 5 सेकंड आदि बदलें।

मैं वास्तव में इसे "AJAX" के रूप में वर्गीकृत नहीं करता वैसे भी, कुछ ऐसा करने के बाद चाल करना चाहिए:

 document.body.style.backgroundColor = 'pink'; 

आप इसे निम्नलिखित तरीकों से STEP 1 में कर सकते हैं

  var imageUrl= "URL OF THE IMAGE HERE"; var BackgroundColor="RED"; // what ever color you want 

शरीर की पृष्ठभूमि को बदलने के लिए

 document.body.style.backgroundImage=imageUrl //changing bg image document.body.style.backgroundColor=BackgroundColor //changing bg color 

आईडी के साथ एक तत्व बदलने के लिए

 document.getElementById("ElementId").style.backgroundImage=imageUrl document.getElementById("ElementId").style.backgroundColor=BackgroundColor 

समान कक्षा वाले तत्वों के लिए

  var elements = document.getElementsByClassName("ClassName") for (var i = 0; i < elements.length; i++) { elements[i].style.background=imageUrl; } 

मैं यहां एक सीएसएस वर्ग के उपयोग को देखना पसंद करता हूं। यह जावास्क्रिप्ट में रंग / हेक्स कोड पढ़ने के लिए मुश्किल हो रहा है।

 document.body.className = className; 

आप बस का उपयोग करके एक पृष्ठ की पृष्ठभूमि को बदल सकते हैं:

 document.body.style.background = #000000; //I used black as color code 

हालांकि, नीचे स्क्रिप्ट प्रत्येक 3 सेकंड के बाद सेटटिमेउट () फ़ंक्शन का उपयोग करके पृष्ठ की पृष्ठभूमि को बदल देगा:

 $(function() { var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"]; setInterval(function() { var bodybgarrayno = Math.floor(Math.random() * colors.length); var selectedcolor = colors[bodybgarrayno]; $("body").css("background",selectedcolor); }, 3000); }) 

और पढो

डेमो

यह ड्रॉप-डाउन मेनू से चयनित उपयोगकर्ता की पसंद के अनुसार पृष्ठभूमि का रंग बदल जाएगा:

 function changeBG() { var selectedBGColor = document.getElementById("bgchoice").value; document.body.style.backgroundColor = selectedBGColor; } 
 <select id="bgchoice" onchange="changeBG()"> <option></option> <option value="red">Red</option> <option value="ivory">Ivory</option> <option value="pink">Pink</option> </select> 

इस स्क्रिप्ट तत्व को अपने शरीर तत्व में जोड़ें:

 <body> <script type="text/javascript"> document.body.style.backgroundColor = "#AAAAAA"; </script> </body> 

लेकिन आप <body> तत्व मौजूद होने से पहले शरीर के रंग को कॉन्फ़िगर करना चाहते हैं इस तरह से इसका सही रंग मिल जाना है

 <script> var myColor = "#AAAAAA"; document.write('\ <style>\ body{\ background-color: '+myColor+';\ }\ </style>\ '); </script> 

यह आप दस्तावेज़ के <head> या अपने जेएस फ़ाइल में डाल सकते हैं।

यहां खेलने के लिए एक अच्छा रंग है

 var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16); 

मैं निम्नलिखित कोड का सुझाव दूंगा:

 <div id="example" onClick="colorize()">Click on this text to change the background color</div> <script type='text/javascript'> function colorize() { var element = document.getElementById("example"); element.style.backgroundColor='#800'; element.style.color='white'; element.style.textAlign='center'; } </script> 

यह जावास्क्रिप्ट का उपयोग कर पृष्ठभूमि को बदलने के लिए सरल कोडिंग है

 <body onLoad="document.bgColor='red'">