[javascript] JavaScript로 배경색을 어떻게 변경합니까?

Program / 글쓴이

누구나 JavaScript를 사용하여 웹 페이지의 배경색을 바꾸는 간단한 방법을 알고 있습니까?

답변

JavaScript 속성을 수정하십시오 document.body.style.background.

예를 들면 다음과 같습니다.

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

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

참고 : 이것은 페이지 구성 방식에 따라 약간 다릅니다. 예를 들어 다른 배경색의 DIV 컨테이너를 사용하는 경우 문서 본문 대신 배경색을 수정해야합니다.

답변

이를 위해 AJAX가 필요하지 않습니다. body 요소의 background-color 속성을 다음과 같이 설정하는 일반 Java 스크립트입니다.

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

마치 서버에서 시작된 것처럼하려면 서버를 폴링 한 다음 그에 따라 색상을 변경해야합니다.

답변

나는 색상 변경이 className더 예쁘다는 이전 포스터에 동의합니다 . 그러나 나의 주장은className 가 “배경을이 색이나 그 색으로 원하는 이유”의 정의로 간주 할 수 있다는 것입니다.

예를 들어, 빨간색으로 만드는 것은 빨간색을 원하기 때문이 아니라 사용자에게 오류를 알리고 싶기 때문입니다. 따라서 AnErrorHasOccured본문에 className 을 설정하는 것이 선호되는 구현입니다.

CSS에서

body.AnErrorHasOccured
{
  background: #f00;
}

자바 스크립트에서 :

document.body.className = "AnErrorHasOccured";

이것에 따라 더 많은 요소를 스타일링하는 옵션이 남습니다 className. 따라서 className사용자 를 설정 하면 페이지에 특정 상태를 부여 할 수 있습니다.

답변

AJAX는 Javascript 및 XML을 사용하여 비동기 방식으로 서버에서 데이터를 가져옵니다. 서버에서 색상 코드를 다운로드하지 않는 한, 이것이 실제로 목표로하는 것이 아닙니다!

그러나 그렇지 않으면 Javascript로 CSS 배경을 설정할 수 있습니다. jQuery와 같은 프레임 워크를 사용하는 경우 다음과 같습니다.

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

그렇지 않으면 다음과 같이 작동합니다.

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

답변

다음과 같은 방법으로 수행 할 수 있습니다.
STEP 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

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 초 등으로 변경하십시오.