web-dev-qa-db-de.com

Wie ändere ich die Hintergrundfarbe mit JavaScript?

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

115
Anders

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

Zum Beispiel:

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

<BODY onload="changeBackground('red');">

Hinweis: Dies hängt ein wenig davon ab, wie Ihre Seite zusammengesetzt wird. Wenn Sie beispielsweise einen DIV-Container mit einer anderen Hintergrundfarbe verwenden, müssen Sie statt des Dokumenthauptteils dessen Hintergrundfarbe ändern.

169
user7094

Sie brauchen dazu nicht AJAX, sondern nur ein einfaches Java-Skript, das die Eigenschaft background-color des body-Elements einstellt, beispielsweise:

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

Wenn Sie es so tun möchten, als ob es vom Server initiiert wurde, müssen Sie den Server abfragen und die Farbe entsprechend ändern.

44
Simon Lehmann

Ich stimme dem vorherigen Poster zu, dass das Ändern der Farbe durch className eine schönere Vorgehensweise ist. Mein Argument ist jedoch, dass eine className als eine Definition von "Warum soll der Hintergrund diese oder diese Farbe haben" betrachtet werden. 

Zum Beispiel ist es nicht nur deshalb so, weil Sie es rot machen wollen, sondern weil Sie Benutzer über einen Fehler informieren möchten. Daher wäre das Festlegen von className AnErrorHasOccured im Body meine bevorzugte Implementierung.

In css

body.AnErrorHasOccured
{
  background: #f00;
}

In JavaScript:

document.body.className = "AnErrorHasOccured";

Dadurch haben Sie die Möglichkeit, weitere Elemente entsprechend dieser className zu gestalten. Wenn Sie also eine className setzen, geben Sie der Seite gewissermaßen einen bestimmten Status.

18
Martin Kool

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

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

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

Ansonsten sollte dies funktionieren:

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

Sie haben folgende Möglichkeiten: __. SCHRITT 1  

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

Zum Ändern des Hintergrunds vonBODY

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

Um ein Element mit einer ID zu ändern

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

für Elemente derselben Klasse

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

Ich würde das nicht wirklich als "AJAX" einstufen. Jedenfalls sollte so etwas wie Folgendes ausreichen: 

document.body.style.backgroundColor = 'pink';
3
Duncan Smart

Css-Ansatz:

Wenn Sie fortlaufende 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 bis 5 Sekunden usw.

3
Deniz.parlak

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

WEITERLESEN

DEMO

2
defau1t

Ich würde es vorziehen, die Verwendung einer CSS-Klasse hier zu sehen. Es vermeidet, schwer lesbare Farben/Hex-Codes in Javascript zu haben.

document.body.className = className;
2
redsquare

Dadurch wird die Hintergrundfarbe entsprechend der Auswahl des Benutzers aus dem Dropdown-Menü 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>

2
Ritam Das

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>

1
james.garriss

Sie möchten jedoch die Körperfarbe konfigurieren, bevor das <body>-Element vorhanden ist. So 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 den <head> des Dokuments oder in Ihre js-Datei einfügen.

Hier ist eine schöne Farbe zum Spielen.

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

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

0
jonathan klevin

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

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

dabei sind a, b, c die Farbwerte

Beispiel:

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

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

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

Ich würde 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>
0
joel hills