Як змінити колір фону за допомогою JavaScript?

Хтось знає простий метод змінити колір фону веб-сторінки за допомогою JavaScript?

Змініть властивість JavaScript document.body.style.background.

Наприклад:

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

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

Примітка: це трохи залежить від способу складання вашої сторінки, наприклад, якщо ви використовуєте контейнер DIV з іншим кольором тла, вам потрібно буде змінити колір тла, а не тіло документа.

Для цього вам не потрібен AJAX, просто якийсь звичайний сценарій java, що встановлює властивість кольору елемента елемента тіла, наприклад:

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

Якщо ви хочете зробити це так, як ніби він був ініційований сервером, вам доведеться запитати сервер, а потім змінити колір відповідно.

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

Наприклад, зробити його червоним не лише тому, що ви хочете його червоним, а тому, що ви хочете повідомити користувачів про помилку. Отже, встановлення className AnErrorHasOccuredна тілі було б моїм кращим варіантом.

У css

body.AnErrorHasOccured
{
  background: #f00;
}

У JavaScript:

document.body.className = "AnErrorHasOccured";

Це залишає вам варіанти стилізації більшої кількості елементів відповідно до цього className. І як такий, встановивши classNameтип, ви надаєте сторінці певний стан.

AJAX отримує дані з сервера за допомогою асинхронного Javascript та XML. Якщо ви не хочете завантажити кольоровий код з сервера, це не те, чого ви дійсно прагнете!

Але в іншому випадку ви можете встановити фон CSS за допомогою Javascript. Якщо ви використовуєте таку структуру, як jQuery, це буде щось подібне:

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

В іншому випадку це має спрацювати:

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

Зробити це можна наступними способами КРОК 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;
        }

Я б насправді не класифікував це як "AJAX". У будь-якому випадку, щось подібне повинно зробити трюк:

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

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

Ви можете змінити фон сторінки, просто скориставшись:

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

ЧИТАЙТЕ БІЛЬШЕ

ДЕМО

Я б вважав за краще тут використовувати клас css. Це дозволяє уникнути важкого зчитування кольорів / шістнадцяткових кодів у JavaScript.

document.body.className = className;

Це змінить колір фону відповідно до вибору користувача, вибраного зі спадного меню:

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>

Додайте цей елемент сценарію до елемента тіла, змінивши колір за бажанням:

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

<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
    <option>Select</option>
    <option style="background-color: #CD5C5C;">#CD5C5C</option>
    <option style="background-color: #F08080;">#F08080</option>
    <option style="background-color: #FA8072;">#FA8072</option>
    <option style="background-color: #E9967A;">#E9967A</option>
    <option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>

Але ви хочете налаштувати колір тіла до того, як <body>елемент існує. Таким чином, він має правильний колір з початку руху.

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

Це можна помістити в <head>документі або у вашому js-файлі.

Тут є хороший колір, з яким можна пограти.

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

Я б запропонував такий код:

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

якщо ви хочете скористатися кнопкою чи іншою подією, просто використовуйте це в JS:

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

Ви можете змінити фон сторінки, просто скориставшись:

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

Детальніше @ Зміна кольору фону

Крім того, якщо ви хочете вказати значення кольору тла в позначеннях rgb, то спробуйте

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

де a, b, c - значення кольорів

Приклад:

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

Це просте кодування для зміни фону за допомогою javascript

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