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

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

kevinji
Редактировал вопрос 16-го января 2014 в 6:44
Программирование
javascript css
13-го октября 2008 в 2:23
55 просмотров
Решение

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

Например:

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

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

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

Mister Jojo
Редактировал ответ 29-го июня 2019 в 9:21
Комментарии (0)

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

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

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

Комментарии (1)

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

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

В CSS

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

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

Nathan Arthur
Редактировал ответ 16-го августа 2017 в 1:17
Комментарии (0)

AJAX-это получение данных с сервера с помощью JavaScript и XML в асинхронном моды. Если вы хотите скачать код цвета с сервера, что's не то, что вы'вновь действительно стремитесь!

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

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

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

document.body.style.background = "#ccc";
Комментарии (0)

Вы можете сделать это следующими способами Шаг 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;
        }
Комментарии (0)

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

document.body.style.backgroundColor = 'pink';
Комментарии (0)

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

Ozgur
Редактировал ответ 4-го сентября 2016 в 10:34
Комментарии (0)

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

в 

function changeBG() {
  var selectedBGColor = document.getElementById("bgchoice").value;
  document.body.style.backgroundColor = selectedBGColor;
}

<select id="bgchoice" onchange="changeBG()">

    Red
    Ivory
    Pink
Nathan Arthur
Редактировал ответ 16-го августа 2017 в 1:19
Комментарии (0)

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

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

Подробнее<БР /><БР />[демо][2]

Комментарии (0)

Я бы предпочел видеть использование CSS-класс здесь. Это позволяет избежать трудно читать цвет / hex-кодов на JavaScript.

document.body.className = className;
Комментарии (0)

Добавить этот элемент сценария для элемента body, изменение цвета в случае необходимости:

в 


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

в

james.garriss
Редактировал ответ 1-го февраля 2018 в 12:16
Комментарии (0)

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

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

где А,B,с-значения цвета

Пример:

document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';
Комментарии (0)

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

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

Это можно поставить в <головы> документа или в свой JS файл.

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


var myColor = '#'+(Math.random()*0xFFFFFF
Комментарии (0)

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

<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>
Nathan Arthur
Редактировал ответ 16-го августа 2017 в 1:20
Комментарии (0)

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

document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
Комментарии (0)

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

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

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

Комментарии (0)

Это простое кодирование для изменения фона на JavaScript

Комментарии (0)