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

Question

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

Answer 1

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

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

function changeBackground(color) {
   document.body.style.background = color;
}

window.addEventListener("load",function() { changeBackground('red') });

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

Answer 2

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

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

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

Comments

वस्तुतः उत्तर देने के लिए: सवाल पृष्ठभूमि के रंग को बदलने का था, सभी पृष्ठभूमि का नहीं।

— वुल्फ

Answer 3

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

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

सीएसएस में

body.AnErrorHasOccured
{
  background: #f00;
}

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

document.body.className = "AnErrorHasOccured";

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

Answer 4

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

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

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

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

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

Answer 5

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

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

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

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;
        }

Answer 6

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

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

Answer 7

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

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

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 सेकेंड तक बदलें।

Answer 8

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

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);
        })

READ MORE

DEMO

Answer 9

मैं यहाँ css क्लास का उपयोग देखना पसंद करूँगा। यह जावास्क्रिप्ट में रंग / हेक्स कोड पढ़ने के लिए कठिन होने से बचा जाता है।

document.body.className = className;

Answer 10

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

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>

Answer 11

अपने शरीर के तत्व में इस स्क्रिप्ट तत्व को जोड़ें, रंग को वांछित रूप में बदलना:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

Answer 12

<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
    <option>Select</option>
    <option style="background-color: #CD5C5C;">#CD5C5C</option>
    <option style="background-color: #F08080;">#F08080</option>
    <option style="background-color: #FA8072;">#FA8072</option>
    <option style="background-color: #E9967A;">#E9967A</option>
    <option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>

Comments

आपकी व्याख्या और इसके अलावा, यह अन्य उत्तरों से कैसे अलग है?

— j08691

Answer 13

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

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

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

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

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

Answer 14

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

<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>

Answer 15

यदि आप एक बटन या किसी अन्य घटना का उपयोग करना चाहते हैं, तो इसे JS में उपयोग करें:

document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});

Answer 16

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

function changeBodyBg(color){
    document.body.style.background = color;
}

और पढ़ें @ बैकग्राउंड कलर बदलना

Answer 17

वैकल्पिक रूप से, यदि आप rgb संकेतन में पृष्ठभूमि रंग मान निर्दिष्ट करना चाहते हैं, तो प्रयास करें

document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

जहाँ a, b, c रंग मान हैं

उदाहरण:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';

Answer 18

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

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