Bagaimana cara mengubah warna latar belakang dengan JavaScript?

Adakah yang tahu metode sederhana untuk menukar warna latar belakang halaman web menggunakan JavaScript?

Ubah properti JavaScript document.body.style.background.

Sebagai contoh:

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

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

Catatan: ini sedikit tergantung pada bagaimana halaman Anda disatukan, misalnya jika Anda menggunakan wadah DIV dengan warna latar yang berbeda, Anda perlu memodifikasi warna latar belakang itu alih-alih badan dokumen.

Anda tidak perlu AJAX untuk ini, cukup beberapa skrip java biasa yang mengatur properti warna latar belakang elemen tubuh, seperti ini:

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

Jika Anda ingin melakukannya seolah-olah itu diprakarsai oleh server, Anda harus polling server dan kemudian ubah warnanya.

Saya setuju dengan poster sebelumnya bahwa mengubah warna oleh classNameadalah pendekatan yang lebih cantik. Namun argumen saya adalah bahwa a classNamedapat dianggap sebagai definisi "mengapa Anda ingin latar belakang warna ini atau itu."

Misalnya, membuatnya merah bukan hanya karena Anda ingin merah, tetapi karena Anda ingin memberi tahu pengguna tentang kesalahan. Dengan demikian, pengaturan className AnErrorHasOccuredpada tubuh akan menjadi implementasi pilihan saya.

Dalam css

body.AnErrorHasOccured
{
  background: #f00;
}

Dalam JavaScript:

document.body.className = "AnErrorHasOccured";

Ini memberi Anda pilihan untuk menata lebih banyak elemen sesuai dengan ini className. Dan dengan demikian, dengan menetapkan classNameAnda semacam memberikan halaman keadaan tertentu.

AJAX mendapatkan data dari server menggunakan Javascript dan XML secara asinkron. Kecuali Anda ingin mengunduh kode warna dari server, itu bukan tujuan Anda sebenarnya!

Tetapi sebaliknya Anda dapat mengatur latar belakang CSS dengan Javascript. Jika Anda menggunakan kerangka kerja seperti jQuery, itu akan menjadi seperti ini:

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

Kalau tidak, ini akan berhasil:

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

Anda dapat melakukannya dengan cara berikut LANGKAH 1

   var imageUrl= "URL OF THE IMAGE HERE";
   var BackgroundColor="RED"; // what ever color you want

Untuk mengubah latar belakang BODY

document.body.style.backgroundImage=imageUrl  //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color

Untuk mengubah elemen dengan ID

document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor 

untuk elemen dengan kelas yang sama

   var elements = document.getElementsByClassName("ClassName")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.background=imageUrl;
        }

Saya tidak akan benar-benar kelas ini sebagai "AJAX". Bagaimanapun, sesuatu seperti mengikuti harus melakukan trik:

document.body.style.backgroundColor = 'pink';

Pendekatan css:

Jika Anda ingin melihat warna terus menerus, gunakan kode ini:

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

Jika Anda ingin melihatnya lebih cepat atau lebih lambat, ubah 10 detik hingga 5 detik dll.

Anda dapat mengubah latar belakang halaman hanya dengan menggunakan:

document.body.style.background = #000000; //I used black as color code

Namun skrip di bawah ini akan mengubah latar belakang halaman setelah setiap 3 detik menggunakan fungsi 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);
        })

BACA LEBIH BANYAK

DEMO

Saya lebih suka melihat penggunaan kelas css di sini. Ini menghindari sulit untuk membaca warna / kode hex dalam javascript.

document.body.className = className;

Ini akan mengubah warna latar belakang sesuai dengan pilihan pengguna yang dipilih dari menu drop-down:

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>

Tambahkan elemen skrip ini ke elemen tubuh Anda, ubah warnanya sesuai keinginan:

<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>

Tetapi Anda ingin mengkonfigurasi warna tubuh sebelum <body>elemen ada. Dengan begitu ia memiliki warna yang tepat sejak awal.

<script>
    var myColor = "#AAAAAA";
    document.write('\
        <style>\
            body{\
                background-color: '+myColor+';\
            }\
        </style>\
    ');
</script>

Ini bisa Anda masukkan ke <head>dalam dokumen atau di file js Anda.

Ini warna yang bagus untuk dimainkan.

var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);

Saya akan menyarankan kode berikut:

<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>

jika Anda ingin menggunakan tombol atau acara lain, cukup gunakan ini di JS:

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

Anda dapat mengubah latar belakang halaman hanya dengan menggunakan:

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

Baca lebih lanjut @ Mengubah Warna Latar Belakang

Atau, jika Anda ingin menentukan nilai warna latar belakang dalam notasi rgb kemudian coba

document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';

di mana a, b, c adalah nilai warna

Contoh:

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

Ini adalah pengkodean sederhana untuk mengubah latar belakang menggunakan javascript

<body onLoad="document.bgColor='red'">