답변:
JavaScript 속성을 수정하십시오 document.body.style.background.
예를 들면 다음과 같습니다.
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });참고 : 이것은 페이지 구성 방식에 따라 약간 다릅니다. 예를 들어 다른 배경색의 DIV 컨테이너를 사용하는 경우 문서 본문 대신 배경색을 수정해야합니다.
나는 색상 변경이 className더 예쁘다는 이전 포스터에 동의합니다 . 그러나 나의 주장은className 가 "배경을이 색이나 그 색으로 원하는 이유"의 정의로 간주 할 수 있다는 것입니다.
예를 들어, 빨간색으로 만드는 것은 빨간색을 원하기 때문이 아니라 사용자에게 오류를 알리고 싶기 때문입니다. 따라서 AnErrorHasOccured본문에 className 을 설정하는 것이 선호되는 구현입니다.
CSS에서
body.AnErrorHasOccured
{
background: #f00;
}자바 스크립트에서 :
document.body.className = "AnErrorHasOccured";이것에 따라 더 많은 요소를 스타일링하는 옵션이 남습니다 className. 따라서 className사용자 를 설정 하면 페이지에 특정 상태를 부여 할 수 있습니다.
다음과 같은 방법으로 수행 할 수 있습니다. STEP 1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you wantBODY 배경 변경
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg colorID가있는 요소를 변경하려면
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;
}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그러나 아래 스크립트는 setTimeout () 함수를 사용하여 3 초마다 페이지의 배경을 변경합니다.
$(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);
})드롭 다운 메뉴에서 선택한 사용자의 선택에 따라 배경색이 변경됩니다.
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>또는 RGB 표기법으로 배경색 값을 지정하려면 시도하십시오.
document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';여기서 a, b, c는 색상 값입니다.
예:
document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';