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

Кто-нибудь знает простой способ поменять цвет фона веб-страницы с помощью JavaScript?

Измените свойство JavaScript document.body.style.background.

Например:

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

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

Примечание: это немного зависит от того, как ваша страница собрана, например, если вы используете контейнер DIV с другим цветом фона, вам нужно будет изменить цвет фона вместо тела документа.

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

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

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

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

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

В 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

Для изменения фона 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;
        }

Я бы не стал классифицировать это как «AJAX». В любом случае, что-то вроде следующего должно помочь:

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, изменив цвет по желанию:

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

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

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

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

Но вам нужно настроить цвет тела до того, как <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>

Вы можете изменить фон страницы, просто используя:

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

Подробнее @ Изменение цвета фона

В качестве альтернативы, если вы хотите указать значение цвета фона в нотации rgb, попробуйте

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

где a, b, c - значения цвета

Пример:

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

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

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