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

Ответ 1

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

Например:

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

В css

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

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

Ответ 4

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

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

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

document.body.className = className;

Ответ 9

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

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

Однако ниже script будет менять фон страницы каждые 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

Ответ 10

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

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>

Ответ 11

Добавьте этот элемент script к элементу body, изменив цвет по желанию:

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

Ответ 12

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

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

Это можно разместить в <head> документа или в файле js.

Вот хороший цвет для игры.

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

Ответ 13

Я бы предложил следующий код:

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

Ответ 14

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

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

Ответ 15

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

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

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

Ответ 16

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

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

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

Пример:

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

Ответ 17

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

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