117

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?

|
172

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.

|
44

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 thiết lập 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.

|
18

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à a classNamecó 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 thân 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 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.

|
9

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

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

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.

|
3

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 thực hiện các mẹo:

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

Đâ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'">
|
2

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

|
2

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

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 cách sử dụng chức năng 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

|
1

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>

|
0

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)';
|
0

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

|
0

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

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.