JavaScript ile arka plan rengini nasıl değiştirebilirim?

JavaScript kullanarak bir web sayfasının arka plan rengini değiştirmek için basit bir yöntem biliyor mu?

JavaScript özelliğini değiştirin document.body.style.background.

Örneğin:

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

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

Not: Bu, sayfanızın nasıl bir araya getirildiğine bağlıdır, örneğin farklı bir arka plan rengine sahip bir DIV kabı kullanıyorsanız, belge gövdesi yerine bunun arka plan rengini değiştirmeniz gerekir.

Bunun için AJAX'a ihtiyacınız yoktur, sadece gövde elemanının background-color özelliğini ayarlayan bazı düz java komut dosyaları:

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

Bunu sunucu tarafından başlatılmış gibi yapmak istiyorsanız, sunucuyu yoklamalı ve ardından rengi buna göre değiştirmelisiniz.

Önceki postere katılıyorum, rengi değiştirmenin classNamedaha güzel bir yaklaşım olduğu. Benim argümanım iseclassName "arka planın neden bu veya bu renk olmasını istediğinizi" tanımlaması olarak kabul edilebileceğidir.

Örneğin, kırmızı yapmak yalnızca kırmızı olmasını değil, aynı zamanda kullanıcılara bir hata hakkında bilgi vermek istediğiniz için de geçerlidir. Bu nedenle, className öğesinin AnErrorHasOccuredgövde üzerinde ayarlanması tercih ettiğim uygulama olacaktır.

Css cinsinden

body.AnErrorHasOccured
{
  background: #f00;
}

JavaScript'te:

document.body.className = "AnErrorHasOccured";

Bu, buna göre daha fazla öğe şekillendirme seçenekleri sunar className. Ve böylece, bir classNametür ayarlayarak sayfaya belirli bir durum verirsiniz.

AJAX, zaman uyumsuz bir şekilde Javascript ve XML kullanarak sunucudan veri alıyor. Renk kodunu sunucudan indirmek istemediğiniz sürece, gerçekten hedeflediğiniz bu değildir!

Ancak aksi takdirde CSS arka planını Javascript ile ayarlayabilirsiniz. JQuery gibi bir çerçeve kullanıyorsanız, bunun gibi bir şey olacaktır:

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

Aksi takdirde, bu işe yaramalıdır:

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

Bunu aşağıdaki şekillerde yapabilirsiniz ADIM 1

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

BODY arka planını değiştirmek için

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

Kimliğine sahip bir öğeyi değiştirmek için

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

aynı sınıfa sahip elemanlar için

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

Bunu gerçekten "AJAX" olarak sınıflandırmazdım. Her neyse, aşağıdaki gibi bir şey hile yapmalıdır:

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

Css yaklaşımı:

Sürekli renk görmek istiyorsanız, şu kodu kullanın:

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

Daha hızlı veya daha yavaş görmek istiyorsanız, 10 saniyeyi 5 saniyeye değiştirin vb.

Bir sayfanın arka planını aşağıdakileri kullanarak değiştirebilirsiniz:

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

Ancak aşağıdaki komut dosyası setTimeout () işlevini kullanarak 3 saniyede bir sayfanın arka planını değiştirir:

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

DEVAMINI OKU

DEMO

Burada bir css sınıfının kullanımını görmeyi tercih ederim. Javascript'te okunması zor renkler / onaltılı kodlara sahip olmaktan kaçınır.

document.body.className = className;

Bu, arka plan rengini açılır menüden seçilen kullanıcının seçimine göre değiştirir:

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>

Bu komut dosyası öğesini beden öğenize ekleyin, rengi istediğiniz gibi değiştirin:

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

Ancak, gövde rengini <body>öğe olmadan önce yapılandırmak istersiniz . Bu şekilde başlangıçtan itibaren doğru renge sahip olur.

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

Bu <head>belgenin içine veya js dosyasına koyabilirsiniz .

İşte oynamak için güzel bir renk.

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

Aşağıdaki kodu öneririm:

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

bir düğme veya başka bir etkinlik kullanmak istiyorsanız, bunu JS'de kullanmanız yeterlidir:

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

Bir sayfanın arka planını aşağıdakileri kullanarak değiştirebilirsiniz:

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

Daha fazla bilgi @ Arkaplan Rengini Değiştirme

Alternatif olarak, rgb notasyonunda arka plan rengi değerini belirtmek istiyorsanız,

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

burada a, b, c renk değerleridir

Misal:

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

Javascript kullanarak arka planı değiştirmek için basit kodlama

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