Hoe verander ik de achtergrondkleur met JavaScript?

Weet iemand een eenvoudige methode om de achtergrondkleur van een webpagina te wisselen met JavaScript?


Antwoord 1, autoriteit 100%

Wijzig de JavaScript-eigenschap document.body.style.background.

Bijvoorbeeld:

function changeBackground(color) {
   document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });

Opmerking: dit hangt een beetje af van hoe uw pagina is samengesteld. Als u bijvoorbeeld een DIV-container met een andere achtergrondkleur gebruikt, moet u de achtergrondkleur daarvan wijzigen in plaats van de hoofdtekst van het document.


Antwoord 2, autoriteit 29%

Hier heb je geen AJAX voor nodig, alleen een eenvoudig java-script dat de background-color-eigenschap van het body-element instelt, zoals dit:

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

Als je het wilt doen alsof het door de server is geïnitieerd, moet je de server pollen en vervolgens de kleur dienovereenkomstig wijzigen.


Antwoord 3, autoriteit 9%

Ik ben het eens met de vorige poster dat het veranderen van de kleur door className een mooiere benadering is. Mijn argument is echter dat een className kan worden beschouwd als een definitie van “waarom je wilt dat de achtergrond deze of die kleur heeft”.

Het rood maken is bijvoorbeeld niet alleen omdat u het rood wilt, maar ook omdat u gebruikers op de hoogte wilt stellen van een fout. Als zodanig zou het instellen van de className AnErrorHasOccured op de body mijn voorkeursimplementatie zijn.

In css

body.AnErrorHasOccured
{
  background: #f00;
}

In JavaScript:

document.body.className = "AnErrorHasOccured";

Dit laat je de opties om meer elementen te stylen volgens deze className. En als zodanig, door een className in te stellen, geef je de pagina een bepaalde status.


Antwoord 4, autoriteit 5%

AJAX haalt op asynchrone wijze gegevens van de server met behulp van Javascript en XML. Tenzij je de kleurcode van de server wilt downloaden, is dat niet waar je echt naar streeft!

Maar anders kunt u de CSS-achtergrond instellen met Javascript. Als u een framework zoals jQuery gebruikt, ziet het er ongeveer zo uit:

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

Anders zou dit moeten werken:

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

Antwoord 5, autoriteit 4%

Je kunt het op de volgende manieren doen
STAP 1

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

Voor het wijzigen van de achtergrond van BODY

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

Een element met ID wijzigen

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

voor elementen met dezelfde klasse

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

Antwoord 6

Ik zou dit niet echt classificeren als “AJAX”. Hoe dan ook, iets als het volgende zou moeten volstaan:

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

Antwoord 7

Je kunt de achtergrond van een pagina wijzigen door simpelweg het volgende te gebruiken:

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

Het onderstaande script verandert echter de achtergrond van de pagina na elke 3 seconden met de functie 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);
        })

LEES MEER

DEMO


Antwoord 8

Css-aanpak:

Als je continue kleur wilt zien, gebruik dan deze code:

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

Als je het sneller of langzamer wilt zien, verander dan 10 seconden in 5 seconden enz.


Antwoord 9

Ik zou hier liever het gebruik van een css-klasse zien. Het vermijdt moeilijk leesbare kleuren / hex-codes in javascript.

document.body.className = className;

Antwoord 10

Hiermee verandert de achtergrondkleur volgens de keuze van de gebruiker die is geselecteerd in het vervolgkeuzemenu:

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>

Antwoord 11

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

Antwoord 12

Voeg dit scriptelement toe aan je body-element en verander de kleur naar wens:

<body>
  <p>Hello, World!</p>
  <script type="text/javascript">
     document.body.style.backgroundColor = "#ff0000";  // red
  </script>
</body>

Antwoord 13

als je een knop of een andere gebeurtenis wilt gebruiken, gebruik dit dan gewoon in JS:

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

Antwoord 14

Als u de achtergrondkleurwaarde in RGB-notatie wilt specificeren, probeer dan

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

waarbij a,b,c de kleurwaarden zijn

Voorbeeld:

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

Antwoord 15

Maar je zou de body-kleur willen configureren voordat het <body>-element bestaat. Zo heeft hij vanaf het begin de juiste kleur.

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

Dit kun je in de <head> van het document of in je js-bestand zetten.

Hier is een mooie kleur om mee te spelen.

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

Antwoord 16

Ik zou de volgende code willen voorstellen:

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

Antwoord 17

Je kunt de achtergrond van een pagina wijzigen door simpelweg het volgende te gebruiken:

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

Lees meer @ De achtergrondkleur wijzigen


Antwoord 18

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>

Antwoord 19

Deze code maakt elke seconde een willekeurige kleur voor de achtergrond.

setInterval(changeColor,1000);
function changeColor(){
  let r = Math.random() * 255 ;
  let g = Math.random() * 255 ;
  let b = Math.random() * 255 ;
  document.body.style.backgroundColor = `rgb( ${r}, ${g}, ${b} )`;
}

Antwoord 20

Dit is een eenvoudige codering voor het wijzigen van de achtergrond met javascript

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

Antwoord 21

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

12 − 5 =

Other episodes