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

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

104
css javascript

16 ответов

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

например:

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

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

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

164

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

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

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

41

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

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

In в CSS

body.AnErrorHasOccured
{
  background: #f00;
}

В JavaScript:

document.body.className = "AnErrorHasOccured";

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

18

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

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

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

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

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

вы можете сделать это следующими способами Шаг 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;
        }
4

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

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

подход 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

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

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

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

document.body.className = className;
2

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

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

добавьте этот элемент скрипта в элемент тела, изменив цвет по желанию:

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

но вы хотели бы настроить цвет тела перед <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

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

<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

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

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

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

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

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

0

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

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