Как изменить цвет фона с помощью JavaScript?

для этого вам не нужен AJAX, просто какой-то простой Java-скрипт, устанавливающий свойство background-color элемента body, например:

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

Если вы хотите сделать это так, как если бы он был инициирован сервером, вам нужно будет опросить сервер, а затем изменить цвет соответственно.

Я согласен с предыдущим плакатом, который меняет цвет на className это более красивый подход. Однако мой аргумент заключается в том, что className можно рассматривать как определение "почему вы хотите, чтобы фон был того или иного цвета."

например, сделать его красным не только потому, что вы хотите, чтобы он был красным, но потому, что вы хотите сообщить пользователям об ошибке. Таким образом, установка className AnErrorHasOccured на теле была бы моя предпочтительная реализация.

In css

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

это оставляет вам варианты укладки больше элементов в соответствии с этим className. И как таковой, установив className вы как бы даете странице определенное состояние.

AJAX получает данные с сервера с помощью Javascript и XML в асинхронном режиме. Если вы не хотите загружать цветовой код с сервера, это не то, к чему вы действительно стремитесь!

но в противном случае вы можете установить фон CSS с помощью Javascript. Если вы используете фреймворк типа jQuery, это будет что-то вроде этого:

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

в противном случае, это должно работать:

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

вы можете сделать это следующими способами Шаг 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

чтобы изменить элемент с ID

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.style.backgroundColor = 'pink';

Css подход:

Если вы хотите видеть непрерывный цвет, используйте этот код:

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 секунд и т. д.

Вы можете изменить фон страницы с помощью:

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

однако ниже скрипт будет изменять фон страницы через каждые 3 секунды с помощью функции 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);
        })

ЧИТАТЬ ДАЛЬШЕ

демо

Я бы предпочел увидеть использование класса css здесь. Это позволяет избежать трудно читать цвета / шестнадцатеричные коды в javascript.

document.body.className = className;

это изменит цвет фона в соответствии с выбором пользователя, выбранного из выпадающего меню:

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>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

но вы хотели бы настроить цвет тела перед <body> элемент существует. Таким образом, он имеет правильный цвет с самого начала.

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

Это вы можете положить в <head> документа или в вашем js-файле.

вот хороший цвет, чтобы играть.

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>

Если вы хотите использовать кнопку или какое-либо другое событие, просто используйте это в JS:

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

вы можете изменить фон страницы с помощью:

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

Читать далее @ изменение цвета фона

Это простое кодирование для изменения фона с помощью javascript

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