it-roy-ru.com

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

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

115
Anders

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

Например:

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

<BODY onload="changeBackground('red');">

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

169
user7094

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

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

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

44
Simon Lehmann

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

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

В css

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

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

18
Martin Kool

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

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

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

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

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

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

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

document.body.style.backgroundColor = 'pink';
3
Duncan Smart

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

3
Deniz.parlak

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

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

2
defau1t

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

document.body.className = className;
2
redsquare

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

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>

2
Ritam Das

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

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

1
james.garriss

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

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

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

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

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

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

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

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

0
jonathan klevin

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

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

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

Пример:

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

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

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

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

<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>
0
joel hills