Wie ändere ich die Hintergrundfarbe mit JavaScript?

Kennt jemand eine einfache Methode, um die Hintergrundfarbe einer Webseite mit JavaScript auszutauschen?

Ändern Sie die JavaScript-Eigenschaft document.body.style.background.

Beispielsweise:

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

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

Hinweis: Dies hängt ein wenig davon ab, wie Ihre Seite zusammengesetzt ist. Wenn Sie beispielsweise einen DIV-Container mit einer anderen Hintergrundfarbe verwenden, müssen Sie die Hintergrundfarbe dieser Seite anstelle des Dokumentkörpers ändern.

Sie benötigen dafür kein AJAX, sondern nur ein einfaches Java-Skript, das die Hintergrundfarbeneigenschaft des body-Elements wie folgt festlegt:

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

Wenn Sie dies so tun möchten, als ob es vom Server initiiert worden wäre, müssten Sie den Server abfragen und dann die Farbe entsprechend ändern.

Ich stimme dem vorherigen Poster zu, dass das Ändern der Farbe durch classNameeinen schöneren Ansatz ist. Mein Argument ist jedoch, dass a classNameals Definition von "warum der Hintergrund diese oder jene Farbe haben soll" angesehen werden kann.

Wenn Sie es beispielsweise rot machen, möchten Sie es nicht nur rot, sondern auch, weil Sie Benutzer über einen Fehler informieren möchten. Daher AnErrorHasOccuredwäre es meine bevorzugte Implementierung , den Klassennamen auf dem Body festzulegen .

In CSS

body.AnErrorHasOccured
{
  background: #f00;
}

In JavaScript:

document.body.className = "AnErrorHasOccured";

Dadurch haben Sie die Möglichkeit, weitere Elemente entsprechend zu gestalten className. Wenn classNameSie also eine festlegen, geben Sie der Seite einen bestimmten Status.

AJAX ruft Daten vom Server mithilfe von Javascript und XML asynchron ab. Wenn Sie den Farbcode nicht vom Server herunterladen möchten, ist dies nicht das, was Sie wirklich anstreben!

Andernfalls können Sie den CSS-Hintergrund mit Javascript festlegen. Wenn Sie ein Framework wie jQuery verwenden, sieht es ungefähr so ​​aus:

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

Andernfalls sollte dies funktionieren:

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

Sie können dies folgendermaßen tun: SCHRITT 1

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

Zum Ändern des Hintergrunds von BODY

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

So ändern Sie ein Element mit ID

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

für Elemente mit derselben Klasse

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

Ich würde das nicht wirklich als "AJAX" klassifizieren. Wie auch immer, so etwas wie das Folgende sollte den Trick machen:

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

CSS-Ansatz:

Wenn Sie durchgehende Farben sehen möchten, verwenden Sie diesen Code:

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

Wenn Sie es schneller oder langsamer sehen möchten, ändern Sie 10 Sekunden auf 5 Sekunden usw.

Sie können den Hintergrund einer Seite ändern, indem Sie einfach Folgendes verwenden:

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

Das folgende Skript ändert jedoch den Hintergrund der Seite alle 3 Sekunden mit der Funktion setTimeout ():

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

LESEN SIE MEHR

DEMO

Ich würde es vorziehen, hier die Verwendung einer CSS-Klasse zu sehen. Es wird vermieden, dass Farben / Hex-Codes in Javascript schwer zu lesen sind.

document.body.className = className;

Dadurch wird die Hintergrundfarbe entsprechend der Auswahl des im Dropdown-Menü ausgewählten Benutzers geändert:

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>

Fügen Sie dieses Skriptelement zu Ihrem Körperelement hinzu und ändern Sie die Farbe wie gewünscht:

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

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

Sie möchten jedoch die Körperfarbe konfigurieren, bevor das <body>Element vorhanden ist. Auf diese Weise hat es von Anfang an die richtige Farbe.

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

Dies können Sie in das <head>Dokument oder in Ihre js-Datei einfügen.

Hier ist eine schöne Farbe zum Spielen.

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

Ich würde den folgenden Code vorschlagen:

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

Wenn Sie eine Schaltfläche oder ein anderes Ereignis verwenden möchten, verwenden Sie dies einfach in JS:

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

Sie können den Hintergrund einer Seite ändern, indem Sie einfach Folgendes verwenden:

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

Lesen Sie mehr @ Ändern der Hintergrundfarbe

Wenn Sie alternativ den Hintergrundfarbwert in der RGB-Notation angeben möchten, versuchen Sie es

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

wobei a, b, c die Farbwerte sind

Beispiel:

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

Dies ist eine einfache Codierung zum Ändern des Hintergrunds mithilfe von Javascript

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