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

Question

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

Answer 1

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

Например:

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

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

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

Answer 2

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

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

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

Answer 3

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

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

In css

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

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

Answer 4

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

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

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

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

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

Answer 5

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

Чтобы изменить элемент с идентификатором

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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>

Answer 9

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

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

ПРОЧИТАЙТЕ БОЛЬШЕ

DEMO

Answer 10

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

document.body.className = className;