Jak zmienić kolor tła za pomocą JavaScript?

Czy ktoś zna prostą metodę zamiany koloru tła strony internetowej za pomocą JavaScript?

Zmodyfikuj właściwość JavaScript document.body.style.background.

Na przykład:

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

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

Uwaga: zależy to trochę od tego, jak twoja strona jest złożona, na przykład jeśli używasz kontenera DIV z innym kolorem tła, będziesz musiał zmodyfikować kolor tła zamiast treści dokumentu.

Nie potrzebujesz do tego AJAX, wystarczy zwykły skrypt java ustawiający właściwość background-color elementu body, na przykład:

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

Jeśli chcesz to zrobić tak, jakby zostało zainicjowane przez serwer, musisz odpytać serwer, a następnie odpowiednio zmienić kolor.

Zgadzam się z poprzednim plakatem, że zmiana koloru o classNameto ładniejsze podejście. Mój argument jest jednak taki, że a classNamemożna traktować jako definicję „dlaczego chcesz, aby tło miało ten lub inny kolor”.

Na przykład uczynienie go czerwonym nie tylko dlatego, że chcesz, aby był czerwony, ale dlatego, że chcesz poinformować użytkowników o błędzie. W związku z tym ustawienie className AnErrorHasOccuredw treści byłoby moją preferowaną implementacją.

W css

body.AnErrorHasOccured
{
  background: #f00;
}

W JavaScript:

document.body.className = "AnErrorHasOccured";

Pozostawia to możliwość stylizacji większej liczby elementów zgodnie z tym className. I jako takie, ustawiając „ classNamety”, nadasz stronie określony stan.

AJAX pobiera dane z serwera za pomocą JavaScript i XML w sposób asynchroniczny. Chyba że chcesz pobrać kod koloru z serwera, nie o to ci chodzi!

Ale w przeciwnym razie możesz ustawić tło CSS za pomocą JavaScript. Jeśli używasz frameworka takiego jak jQuery, będzie to mniej więcej tak:

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

W przeciwnym razie powinno to działać:

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

Możesz to zrobić w następujący sposób KROK 1

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

Do zmiany tła BODY

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

Aby zmienić element z ID

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

dla elementów o tej samej klasie

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

Naprawdę nie klasyfikowałbym tego jako „AJAX”. W każdym razie coś takiego powinno załatwić sprawę:

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

Podejście CSS:

Jeśli chcesz widzieć ciągły kolor, użyj tego kodu:

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

Jeśli chcesz zobaczyć to szybciej lub wolniej, zmień 10 sekund na 5 sekund itd.

Możesz zmienić tło strony, używając po prostu:

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

Jednak poniższy skrypt zmieni tło strony co 3 sekundy za pomocą funkcji 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);
        })

CZYTAJ WIĘCEJ

DEMO

Wolałbym zobaczyć tutaj użycie klasy css. Pozwala to uniknąć trudnych do odczytania kolorów / kodów szesnastkowych w javascript.

document.body.className = className;

Spowoduje to zmianę koloru tła zgodnie z wyborem użytkownika wybranego z menu rozwijanego:

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>

Dodaj ten element skryptu do elementu body, zmieniając kolor według potrzeb:

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

Ale chciałbyś skonfigurować kolor ciała, zanim <body>element istnieje. W ten sposób od samego początku ma odpowiedni kolor.

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

Możesz to umieścić w <head>dokumencie lub w pliku js.

Oto ładny kolor do zabawy.

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

Proponuję następujący kod:

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

jeśli chcesz użyć przycisku lub innego zdarzenia, po prostu użyj tego w JS:

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

Możesz zmienić tło strony, używając po prostu:

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

Przeczytaj więcej @ Zmiana koloru tła

Alternatywnie, jeśli chcesz określić wartość koloru tła w notacji rgb, spróbuj

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

gdzie a, b, c to wartości kolorów

Przykład:

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

To jest proste kodowanie do zmiany tła za pomocą javascript

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