Кто-нибудь знает простой способ изменить цвет фона веб-страницы с помощью JavaScript?
Измените свойство JavaScript document.body.style.background
.
Например:
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
Примечание: это немного зависит от того, как составлена ваша страница, например, если вы используете контейнер DIV с другим цветом фона, вам нужно будет изменить цвет фона этого контейнера, а не тела документа.
Для этого вам не нужен AJAX, достаточно простого java-скрипта, устанавливающего свойство background-color элемента body, например, так:
document.body.style.backgroundColor = "#AA0000";
Если вы хотите сделать это так, как если бы это было инициировано сервером, вам придется опрашивать сервер и затем соответствующим образом изменять цвет.
Я согласен с предыдущим плакат, который меняет цвет на имя класса
, - конечно, красивее. Однако мой аргумент заключается в том, что имя класса
может рассматриваться как определение "Почему вы хотите, чтобы фон должен быть тот или иной цвет&.и"
Например, делая ее красной не только потому, что вы хотите, он красный, а потому, что вы'd не хотите сообщать пользователям ошибки. Как таковая, установка AnErrorHasOccured класса `` на теле будет мой предпочтительный реализации.
В CSS
body.AnErrorHasOccured
{
background: #f00;
}
В JavaScript:
document.body.className = "AnErrorHasOccured";
Это оставляет вас варианты укладки нескольких элементов в соответствии с этой имя класса
. И как таковой, установив имя_класса
вы дать страницу в определенное состояние.
AJAX-это получение данных с сервера с помощью JavaScript и XML в асинхронном моды. Если вы хотите скачать код цвета с сервера, что's не то, что вы'вновь действительно стремитесь!
Но в противном случае вы можете установить в CSS фон с помощью JavaScript. Если вы'повторно, используя фреймворк типа jQuery, это'll быть что-то вроде этого:
$('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
Для изменения фона корпус
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;
}
Я бы не стал относить это к "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 секунд и т. д.
Это изменит цвет фона по выбору пользователя выбирается из выпадающего меню:
в
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>
в
Вы можете изменить фон страницы с помощью:
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]
Добавить этот элемент сценария для элемента body, изменение цвета в случае необходимости:
в
<body>
<p>Hello, World!</p>
<script type="text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body>
в
Кроме того, если вы хотите, чтобы указать цвет фона значение в значение RGB, то попробуйте
document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
где А,B,с-значения цвета
Пример:
document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';
Но вы хотели, чтобы настроить цвет кузова перед <тело>
элемент существует. Таким образом, он имеет право цвет с самого начала.
<script>
var myColor = "#AAAAAA";
document.write('\
<style>\
body{\
background-color: '+myColor+';\
}\
</style>\
');
</script>
Это можно поставить в <головы>
документа или в свой 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>
Вы можете изменить фон страницы с помощью:
function changeBodyBg(color){
document.body.style.background = color;
}
Подробнее @ изменение цвета фона
Это простое кодирование для изменения фона на JavaScript
<body onLoad="document.bgColor='red'">