Làm cách nào để thay đổi màu nền bằng JavaScript?

Bất cứ ai cũng biết một phương pháp đơn giản để hoán đổi màu nền của trang web bằng JavaScript?

Sửa đổi thuộc tính JavaScript document.body.style.background.

Ví dụ:

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

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

Lưu ý: điều này phụ thuộc một chút vào cách trang của bạn được kết hợp với nhau, ví dụ: nếu bạn đang sử dụng bộ chứa DIV với màu nền khác, bạn sẽ cần phải sửa đổi màu nền của trang đó thay vì thân tài liệu.

Bạn không cần AJAX cho việc này, chỉ cần một số tập lệnh java đơn giản đặt thuộc tính màu nền của thành phần cơ thể, như sau:

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

Nếu bạn muốn làm điều đó như thể nó được khởi tạo bởi máy chủ, bạn sẽ phải thăm dò máy chủ và sau đó thay đổi màu sắc cho phù hợp.

Tôi đồng ý với các poster trước đó rằng thay đổi màu sắc classNamelà một cách tiếp cận đẹp hơn. Tuy nhiên, lập luận của tôi làclassName có thể được coi là một định nghĩa về "lý do tại sao bạn muốn nền là màu này hoặc màu đó."

Chẳng hạn, làm cho nó màu đỏ không chỉ vì bạn muốn nó màu đỏ, mà bởi vì bạn muốn thông báo cho người dùng về một lỗi. Như vậy, đặt className AnErrorHasOccuredtrên cơ thể sẽ là triển khai ưa thích của tôi.

Trong css

body.AnErrorHasOccured
{
  background: #f00;
}

Trong JavaScript:

document.body.className = "AnErrorHasOccured";

Điều này để lại cho bạn các tùy chọn tạo kiểu nhiều yếu tố hơn theo điều này className. Và như vậy, bằng cách đặt một classNameloại bạn cung cấp cho trang một trạng thái nhất định.

AJAX đang lấy dữ liệu từ máy chủ bằng Javascript và XML theo cách không đồng bộ. Trừ khi bạn muốn tải xuống mã màu từ máy chủ, đó không phải là điều bạn thực sự hướng tới!

Nhưng nếu không, bạn có thể đặt nền CSS bằng Javascript. Nếu bạn đang sử dụng một khung công tác như jQuery, nó sẽ giống như thế này:

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

Nếu không, điều này sẽ làm việc:

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

Bạn có thể làm theo những cách sau BƯỚC 1

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

Để thay đổi nền tảng của BODY

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

Để thay đổi một yếu tố với ID

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

cho các phần tử có cùng lớp

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

Tôi sẽ không thực sự xếp loại này là "AJAX". Dù sao, một cái gì đó như sau nên làm thủ thuật:

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

Cách tiếp cận Css:

Nếu bạn muốn xem màu liên tục, hãy sử dụng mã này:

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

Nếu bạn muốn thấy nó nhanh hơn hoặc chậm hơn, hãy thay đổi 10 giây thành 5 giây, v.v.

Bạn có thể thay đổi nền của trang bằng cách sử dụng:

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

Tuy nhiên, tập lệnh bên dưới sẽ thay đổi nền của trang sau mỗi 3 giây bằng hàm 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);
        })

ĐỌC THÊM

DEMO

Tôi muốn thấy việc sử dụng một lớp css ở đây. Nó tránh việc khó đọc màu / mã hex trong javascript.

document.body.className = className;

Điều này sẽ thay đổi màu nền theo sự lựa chọn của người dùng được chọn từ menu thả xuống:

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>

Thêm phần tử script này vào phần tử body của bạn, thay đổi màu sắc theo ý muốn:

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

Nhưng bạn sẽ muốn cấu hình màu cơ thể trước khi <body>phần tử tồn tại. Bằng cách đó, nó có màu sắc phù hợp từ việc di chuyển.

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

Cái này bạn có thể đặt vào <head> tài liệu hoặc trong tập tin js của bạn.

Đây là một màu sắc đẹp để chơi với.

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

Tôi muốn đề xuất mã sau đây:

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

nếu bạn muốn sử dụng một nút hoặc một số sự kiện khác, chỉ cần sử dụng điều này trong JS:

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

Bạn có thể thay đổi nền của trang bằng cách sử dụng:

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

Đọc thêm @ Thay đổi màu nền

Ngoài ra, nếu bạn muốn chỉ định giá trị màu nền trong ký hiệu rgb thì hãy thử

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

trong đó a, b, c là các giá trị màu

Thí dụ:

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

Đây là mã hóa đơn giản để thay đổi nền bằng cách sử dụng javascript

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