ฉันจะเปลี่ยนสีพื้นหลังด้วย JavaScript ได้อย่างไร

ใครรู้วิธีง่าย ๆ ในการสลับสีพื้นหลังของเว็บเพจโดยใช้ JavaScript

document.body.style.backgroundปรับเปลี่ยนคุณสมบัติจาวาสคริปต์

ตัวอย่างเช่น:

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

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

หมายเหตุ: สิ่งนี้ขึ้นอยู่กับการรวมหน้าของคุณเข้าด้วยกันตัวอย่างเช่นหากคุณใช้คอนเทนเนอร์ DIV ที่มีสีพื้นหลังที่แตกต่างกันคุณจะต้องแก้ไขสีพื้นหลังของหน้านั้นแทนเนื้อความเอกสาร

คุณไม่จำเป็นต้องใช้ AJAX สำหรับสิ่งนี้เพียงแค่สคริปต์ java ธรรมดาบางตัวที่ตั้งค่าคุณสมบัติสีพื้นหลังขององค์ประกอบร่างกายเช่นนี้:

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

ถ้าคุณต้องการที่จะทำมันราวกับว่ามันเริ่มต้นโดยเซิร์ฟเวอร์คุณจะต้องสำรวจความคิดเห็นของเซิร์ฟเวอร์แล้วเปลี่ยนสีตาม

ฉันเห็นด้วยกับโปสเตอร์ก่อนหน้าว่าการเปลี่ยนสีโดยclassNameเป็นวิธีที่ดีกว่า ข้อโต้แย้งของฉันคือว่าclassNameสามารถถือได้ว่าเป็นคำจำกัดความของ "ทำไมคุณต้องการให้พื้นหลังเป็นสีนี้หรือสีนั้น"

ตัวอย่างเช่นการทำให้เป็นสีแดงไม่ใช่เพียงเพราะคุณต้องการให้เป็นสีแดง แต่เป็นเพราะคุณต้องการแจ้งให้ผู้ใช้ทราบถึงข้อผิดพลาด เช่นนี้การตั้ง className AnErrorHasOccuredในร่างกายจะเป็นการใช้งานที่ฉันต้องการ

ใน css

body.AnErrorHasOccured
{
  background: #f00;
}

ใน JavaScript:

document.body.className = "AnErrorHasOccured";

classNameใบนี้คุณมีตัวเลือกในการจัดแต่งทรงผมองค์ประกอบตามนี้ และเช่นนี้โดยการตั้งค่าclassNameชนิดของคุณให้หน้ารัฐบางอย่าง

AJAX รับข้อมูลจากเซิร์ฟเวอร์โดยใช้ Javascript และ XML ในแบบอะซิงโครนัส ถ้าคุณไม่ต้องการดาวน์โหลดรหัสสีจากเซิร์ฟเวอร์นั่นไม่ใช่สิ่งที่คุณต้องการจริงๆ!

แต่อย่างอื่นคุณสามารถตั้งค่าพื้นหลัง CSS ด้วย Javascript หากคุณใช้เฟรมเวิร์กอย่าง jQuery มันจะเป็นแบบนี้:

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

มิฉะนั้นสิ่งนี้จะทำงานได้:

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

คุณสามารถทำได้ในวิธีต่อไปนี้ ขั้นตอนที่ 1

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

สำหรับการเปลี่ยนพื้นหลังของBODY

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

ในการเปลี่ยนองค์ประกอบที่มี ID

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

สำหรับองค์ประกอบที่มีคลาสเดียวกัน

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

ฉันจะไม่เรียกคลาสนี้ว่า "AJAX" อย่างไรก็ตามสิ่งต่อไปนี้ควรทำเคล็ดลับ:

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

วิธีการ Css:

หากคุณต้องการดูสีต่อเนื่องใช้รหัสนี้:

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

หากคุณต้องการดูเร็วขึ้นหรือช้าลงเปลี่ยน 10 วินาทีถึง 5 วินาทีเป็นต้น

คุณสามารถเปลี่ยนพื้นหลังของหน้าเพียงแค่ใช้:

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

อย่างไรก็ตามสคริปต์ด้านล่างจะเปลี่ยนพื้นหลังของหน้าหลังจากทุก 3 วินาทีโดยใช้ฟังก์ชั่น 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);
        })

อ่านเพิ่มเติม

DEMO

ฉันต้องการดูการใช้คลาส css ที่นี่ มันหลีกเลี่ยงการอ่านรหัสสี / ฐานสิบหกใน JavaScript

document.body.className = className;

วิธีนี้จะเปลี่ยนสีพื้นหลังตามตัวเลือกของผู้ใช้ที่เลือกจากเมนูแบบเลื่อนลง:

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>

เพิ่มองค์ประกอบสคริปต์นี้ไปยังองค์ประกอบร่างกายของคุณเปลี่ยนสีตามที่ต้องการ:

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

แต่คุณต้องการกำหนดค่าสีร่างกายก่อนที่<body>องค์ประกอบจะมีอยู่ ด้วยวิธีนี้มันมีสีที่ถูกต้องตั้งแต่เริ่มต้น

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

คุณสามารถใส่<head>เอกสารหรือในไฟล์ js ของคุณ

นี่คือสีที่น่าเล่นด้วย

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

ฉันขอแนะนำรหัสต่อไปนี้:

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

หากคุณต้องการใช้ปุ่มหรือเหตุการณ์อื่นเพียงใช้สิ่งนี้ใน JS:

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

คุณสามารถเปลี่ยนพื้นหลังของหน้าเพียงแค่ใช้:

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

อ่านเพิ่มเติม @ การเปลี่ยนสีพื้นหลัง

หรือหากคุณต้องการระบุค่าสีพื้นหลังในรูปแบบ rgb ให้ลอง

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

โดยที่ a, b, c คือค่าสี

ตัวอย่าง:

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

นี่คือการเข้ารหัสที่ง่ายสำหรับการเปลี่ยนพื้นหลังโดยใช้ javascript

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