Как изменить цвет фона с помощью JavaScript?
Кто-нибудь знает простой способ поменять цвет фона веб-страницы с помощью JavaScript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 21
Измените свойство JavaScript document.body.style.background.
Например:
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
Примечание: это немного зависит от того, как ваша страница собрана, например, если вы используете контейнер DIV с другим цветом фона, вам нужно будет изменить цвет фона вместо тела документа.
Я бы не стал классифицировать это как «AJAX». В любом случае, что-то вроде следующего должно помочь:
document.body.style.backgroundColor = 'pink';
Для этого вам не нужен AJAX, просто какой-нибудь простой java-скрипт, устанавливающий свойство background-color элемента body, например:
document.body.style.backgroundColor = "#AA0000";
Если вы хотите сделать это так, как если бы это было инициировано сервером, вам нужно будет опросить сервер, а затем соответствующим образом изменить цвет.
Это не сработало для меня, если я не поставил просто "background" вместо "backgroundColor"
AJAX получает данные с сервера с помощью Javascript и XML в асинхронном режиме. Если вы не хотите загружать цветовой код с сервера, это не то, к чему вы действительно стремитесь!
Но в противном случае вы можете установить фон CSS с помощью Javascript. Если вы используете фреймворк вроде jQuery, это будет примерно так:
$('body').css('background', '#ccc');
В противном случае это должно сработать:
document.body.style.background = "#ccc";
Я бы предпочел увидеть здесь использование класса css. Это позволяет избежать трудностей с чтением цветов / шестнадцатеричных кодов в javascript.
document.body.className = className;
Я согласен с предыдущим постером, что изменение цвета с помощью className - более привлекательный подход. Однако мой аргумент состоит в том, что className можно рассматривать как определение того, «почему вы хотите, чтобы фон был того или иного цвета».
Например, сделать его красным не только потому, что вы хотите, чтобы он стал красным, а потому, что вы хотите сообщить пользователям об ошибке. Таким образом, установка className AnErrorHasOccured в теле будет моей предпочтительной реализацией.
В css
body.AnErrorHasOccured
{
background: #f00;
}
В JavaScript:
document.body.className = "AnErrorHasOccured";
Это оставляет вам возможность стилизовать больше элементов в соответствии с className. Таким образом, устанавливая className, вы как бы придаете странице определенное состояние.
Добавьте этот элемент скрипта в свой элемент body, изменив цвет по желанию:
<body>
<p>Hello, World!</p>
<script type = "text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body>Вы можете изменить фон страницы, просто используя:
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);
})
Однако вам нужны кавычки по этому номеру
Но вам нужно настроить цвет корпуса до того, как появится элемент <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>
Вы можете сделать это следующими способами ШАГ 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
Чтобы изменить элемент с идентификатором
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;
}
Это простой код для изменения фона с помощью javascript
<body onLoad = "document.bgColor='red'">
Подход 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 секунд и т. д.
Это изменит цвет фона в соответствии с выбором пользователя, выбранным в раскрывающемся меню:
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>если вы хотите использовать кнопку или другое событие, просто используйте это в 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)';
<!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>
Где ваше объяснение и, кроме того, чем оно отличается от других ответов?
function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }<p onclick = "pink()" style = "padding:10px;background:pink">Pink</p>
<p onclick = "sky()" style = "padding:10px;background:skyblue">Sky</p>Или ... вы можете просто сделать background (0) ;, в функции draw (); (0 - черный цвет)
function draw(){
background(0);
}
Можно ли изменить ответ, чтобы его было легче понять с помощью блока кода?
подожди, что ммммм
Этот код создает случайный цвет фона каждую секунду.
setInterval(changeColor,1000);
function changeColor(){
let r = Math.random() * 255 ;
let g = Math.random() * 255 ;
let b = Math.random() * 255 ;
document.body.style.backgroundColor = `rgb( ${r}, ${g}, ${b} )`;
}Надеюсь кому-то поможет.
Для дословного ответа: вопрос был об изменении цвета фона, а не всего фона.