Jak zmienić kolor tła za pomocą JavaScript?

153

Modyfikuj właściwość JavaScript document.body.style.background.

Na przykład:

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

<BODY onload="changeBackground('red');">

Uwaga: to nie zależy trochę o tym, jak strona jest umieszczany razem, na przykład jeśli używasz kontener div z innym kolorem tła trzeba będzie zmodyfikować kolor tła tego zamiast treści dokumentu.

Źródło

2008-10-13 14:27:01

3

Nie nazwałbym tego tak naprawdę "AJAX". W każdym razie, coś jak następujące powinny rade:

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

Źródło

2008-10-13 14:27:50

38

Nie trzeba AJAX do tego, tylko jakiś zwykły skrypt java ustawiając właściwość background-color elementu ciała, podobnie jak to:

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

Jeśli chcesz zrobić to tak, jakby zostało zainicjowane przez serwer, musisz odpytać serwer, a następnie odpowiednio zmienić kolor.

Źródło

2008-10-13 14:27:56

+1

Odpowiadając dosłownie: pytanie dotyczyło zmiany koloru tła, a nie całego tła. – Wolf

9

AJAX pobiera dane z serwera przy użyciu Javascript i XML w sposób asynchroniczny. Chyba że chcesz pobrać kod koloru z serwera, to nie jest to, czego naprawdę szukasz!

Ale w przeciwnym razie możesz ustawić tło CSS za pomocą Javascript. Jeśli używasz ramy jak jQuery, to będzie coś takiego:

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

W przeciwnym razie, to powinno działać:

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

Źródło

2008-10-13 14:30:23 Oli

2

wolałbym zobaczyć korzystanie z klasy css tutaj . Pozwala uniknąć trudnych do odczytania kolorów/kodów szesnastkowych w javascript.

document.body.className = className;

Źródło

2008-10-13 14:48:57 redsquare

18

Zgadzam się z poprzednim poster że zmiana koloru przez className jest ładniejsza podejście. Argumentuję jednak, że className można uznać za definicję "dlaczego chcesz, aby tło było tym lub tym kolorem".

Na przykład, zaznaczenie go kolorem czerwonym nie jest spowodowane tym, że ma być czerwone, ale dlatego, że chcesz poinformować użytkowników o błędzie. W związku z tym ustawienie mojej nazwy na AnErrorHasOccured byłoby moją preferowaną implementacją.

w CSS

body.AnErrorHasOccured 
{ 
    background: #f00; 
}

W JavaScript:

document.body.className = "AnErrorHasOccured";

Pozostaje Ci opcje stylizacji więcej elementów według tego className. I jako takie, ustawiając className możesz nadać stronie pewien stan.

Źródło

2008-10-13 15:03:17

1

Dodaj ten element skryptu do elementu nadwozia, zmianę koloru jako pożądane:

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

Źródło

2011-02-01 17:41:54

2

Można zmienić tło strony używając zwyczajnie:

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

Jednak poniższy skrypt zmieni tło strony po każdych 3 sekundach, używając funkcji 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); 
     })

READ MORE

DEMO

Źródło

2012-11-02 11:27:23 defau1t

0

Ale czy chcesz zmienić kolor ciała przed istnieje element <body>. W ten sposób ma odpowiedni kolor od samego początku.

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

To można umieścić w pliku <head> dokumentu lub w pliku js.

Oto ładny kolor do zabawy.

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

Źródło

2013-10-02 19:27:02

0

Proponuję następujący kod:

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

Źródło

2015-01-22 07:14:07

3

Można to zrobić w następujący sposób KROK 1

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

Aby zmienić tło z CIAŁA

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

Aby zmienić element z ID

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

dla elementów z tej samej klasy

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

Źródło

2015-02-26 05:10:11

-2

To proste kodowanie do zmiany tła przy użyciu JavaScript

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

Źródło

2016-06-13 08:12:32

3

Css aplikacja Roach:

Jeśli chcesz zobaczyć ciągłego kolor, użyj tego kodu:

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

Jeśli chcesz je zobaczyć szybciej lub wolniej, zmień 10 sekund do 5 sekund itd.

Źródło

2016-09-04 09:16:28

1

Spowoduje to zmianę koloru tła w zależności od wyboru użytkownika wybranego z menu rozwijanego:

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>

Źródło

2017-03-25 11:39:22

0

jeśli chcesz użyć przycisku lub innego zdarzenia, po prostu użyj tego w JS:

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

Źródło

2018-02-22 11:14:57 Alex

Jak zmienić kolor tła za pomocą JavaScript?

Odpowiedz

Powiązane problemy