source

자바스크립트로 배경색을 변경하려면 어떻게 해야 합니까?

ittop 2023. 10. 29. 19:59
반응형

자바스크립트로 배경색을 변경하려면 어떻게 해야 합니까?

자바스크립트로 웹페이지의 배경색을 바꾸는 간단한 방법 아는 사람?

자바스크립트 속성 수정document.body.style.background.

예를 들어,

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

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

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

이를 위해 AJAX는 필요하지 않습니다. 다만 본문 요소의 배경색 속성을 설정하는 일반 자바 스크립트는 다음과 같습니다.

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

서버가 시작한 것처럼 하려면 서버를 폴링한 다음 색상을 변경해야 합니다.

색상을 다음과 같이 변경한다는 이전 포스터에 동의합니다.className더 예쁜 접근법입니다.하지만 내 주장은.className"배경이 이것 또는 저 색상이 되기를 원하는 이유"에 대한 정의로 간주될 수 있습니다.

예를 들어 빨간색으로 만드는 것은 빨간색을 원하기 때문이 아니라 사용자에게 오류를 알리고 싶기 때문입니다.이와 같이 className을 설정AnErrorHasOccured제가 선호하는 구현 방법은 신체입니다.

CSS에서

body.AnErrorHasOccured
{
  background: #f00;
}

자바스크립트의 경우:

document.body.className = "AnErrorHasOccured";

이에 따라 더 많은 요소를 스타일링 할 수 있는 옵션이 남습니다.className. 그리고 그와 같이, a를 설정함으로써.className당신은 페이지에 특정한 상태를 부여합니다.

AJAX는 서버에서 자바스크립트와 XML을 비동기 방식으로 사용하여 데이터를 얻고 있습니다.서버에서 컬러 코드를 다운로드하고 싶지 않다면, 그것은 당신이 진정으로 원하는 것이 아닙니다!

그러나 그렇지 않으면 자바스크립트로 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초 등으로 바꾸세요.

다음을 사용하여 페이지의 배경을 변경할 수 있습니다.

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

더 읽기

데모

저는 여기서 CSS 클래스를 사용하는 것을 보고 싶습니다.자바스크립트에서 색상/16진수 코드를 읽기 어려운 것을 방지합니다.

document.body.className = className;

버튼이나 다른 이벤트를 사용하고 싶다면, JS에서 이것을 사용하세요:

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

이렇게 하면 드롭다운 메뉴에서 선택한 사용자의 선택에 따라 배경색이 변경됩니다.

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>

또는 배경색 값을 rgb 표기법으로 지정하려면 다음을 수행합니다.

document.getElementById("yourid").style.backgroundColor = `rgb(${a}, ${b}, ${c})`;

여기서 a,b,c는 색상 값입니다.

예:

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

자바스크립트를 이용하여 배경색을 변경하는 2가지 방법은 다음과 같습니다.

  1. 자바스크립트로 배경색을 변경하시려면 배경을 변경하실 요소에 적용하시면 됩니다.

    아래 예제는 다음을 사용하여 요소를 클릭하면 본문의 배경색이 변경됩니다.style.background소유물.

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>

  1. 또 다른 접근 방법은 첨부된 요소에 배경을 제공하는 자바스크립트를 사용하여 CSS 클래스를 추가하는 것입니다.

    javascript를 사용하여 클래스를 추가하는 방법을 더 많이 볼 수 있지만 여기서는 간단히 사용할 수 있습니다.classList.add()소유물.

        function addClass(yourClass){
        document.body.classList.remove("sky", "pink");
        document.body.classList.add(yourClass);
    }
        .pink {
        background: pink;
    }

    .sky {
        background: skyblue;
    }
        <p onclick="addClass('pink')" style="padding:10px;background:pink">Pink</p>
    <p onclick="addClass('sky')" style="padding:10px;background:skyblue">Sky</p>

그래서 당신은 다음과 같은 기능을 호출하는 것만으로 매우 쉽게 할 수 있습니다.

 function changeBg()
    {
      document.body.style.color.backgroundColor="#ffffff";

    }

하지만 당신은 그 전에 바디 컬러를 구성하고 싶을 것입니다.<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>

다음을 사용하여 페이지의 배경을 변경할 수 있습니다.

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

더보기 @ 배경색 변경

를 사용하여 달성할 수 있습니다.

document.body.style.color.backgroundColor = "#000000";

 <p id="p1">Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <p >Hello, Moazzam!</p>
 <script type="text/javascript">
 document.getElementById("p1").style.color= "#ff0000";  // red
 </script>

언급URL : https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript

반응형

'source' 카테고리의 다른 글

오류 코드: 1822.외부 키 제약 조건을 추가하지 못했습니다.제약 조건에 대한 인덱스 누락  (0) 2023.10.29
워드프레스 게시물의 자바스크립트  (0) 2023.10.29
대용량 데이터 삽입을 위한 최적의 선택  (0) 2023.10.29
리눅스 커널 Makefile에서 obj-y += something/의 의미는?  (0) 2023.10.29
Spring WebFlux - Server Response Jackson Serializer 문제  (0) 2023.10.29

'source'의 다른글

  • 현재글자바스크립트로 배경색을 변경하려면 어떻게 해야 합니까?

관련글

댓글

티스토리툴바