Q

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

2008-10-13 105 views 98 likes

98

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

2008-10-13 Anders

A

Trả lời

153

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

Ví dụ:

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

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

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

2008-10-13 14:27:01

3

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

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

2008-10-13 14:27:50

38

Bạn không cần AJAX cho điều này, chỉ là một số java script đơn giản thiết lập thuộc tính background-color của các yếu tố cơ thể, như thế này:

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

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

2008-10-13 14:27:56

+1

Để trả lời theo nghĩa đen: câu hỏi về thay đổi màu nền, không phải tất cả nền. – Wolf

9

AJAX đang nhận dữ liệu từ máy chủ bằng cách sử dụ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à những gì bạn đang thực sự nhắm 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 khuôn khổ như jQuery, nó sẽ có một cái gì đó 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";

2008-10-13 14:30:23 Oli

2

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

document.body.className = className;

2008-10-13 14:48:57 redsquare

18

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

Ví dụ: làm cho màu đỏ không chỉ vì bạn muốn màu đỏ, mà còn vì bạn muốn thông báo cho người dùng về lỗi. Như vậy, thiết lập className AnErrorHasOccured trê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";

này để lại cho bạn các tùy chọn của phong cách hơn các yếu tố theo className này. Và như vậy, bằng cách thiết lập một className bạn loại cung cấp cho trang một trạng thái nhất định.

2008-10-13 15:03:17

1

Thêm yếu tố kịch bản này để yếu tố cơ thể của bạn, thay đổi màu sắc như mong muốn:

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

2011-02-01 17:41:54

2

Bạn có thể thay đổi nền của một trang bằng cách đơn giản 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 sử dụ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); 
     })

READ MORE

DEMO

2012-11-02 11:27:23 defau1t

0

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

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

Điều này bạn có thể đặt trong <head> của tài liệu hoặc trong tệp js.

Đây là màu sắc đẹp để chơi cùng.

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

2013-10-02 19:27:02

0

tôi sẽ đề nghị đoạn mã sau:

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

2015-01-22 07:14:07

3

Bạn có thể làm điều đó trong những cách sau đây BƯỚC 1

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

Đối với việc thay đổi nền 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 yếu tố với cùng một lớp

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

2015-02-26 05:10:11

-2

Đây là mã hóa đơn giản cho việc thay đổi nền sử dụng javascript

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

2016-06-13 08:12:32

3

Css ứng dụng roach:

Nếu bạn muốn xem màu liên tục, 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 nhìn thấy nó nhanh hơn hoặc chậm hơn, thay đổi 10 giây đến 5 giây, vv

2016-09-04 09:16:28

1

này sẽ thay đổi màu nền theo sự lựa chọn của người dùng được lựa chọn từ trình đơn 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>

2017-03-25 11:39:22

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 tính năng này trong JS:

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

2018-02-22 11:14:57 Alex

Các vấn đề liên quan