আমি কীভাবে জাভাস্ক্রিপ্ট দিয়ে পটভূমির রঙ পরিবর্তন করব?

Question

জাভাস্ক্রিপ্ট ব্যবহার করে কোনও ওয়েবপৃষ্ঠার পটভূমির রঙের অদলবদল করার জন্য যে কোনও সহজ পদ্ধতি জানেন?

Answer 1

জাভাস্ক্রিপ্ট সম্পত্তি পরিবর্তন করুন document.body.style.background।

উদাহরণ স্বরূপ:

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

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

দ্রষ্টব্য: এটি আপনার পৃষ্ঠাকে কীভাবে একসাথে রাখা হয় তার উপরে কিছুটা নির্ভর করে না, উদাহরণস্বরূপ আপনি যদি কোনও ডিআইভির ধারককে আলাদা পটভূমির রঙের সাথে ব্যবহার করেন তবে আপনাকে ডকুমেন্টের বডির পরিবর্তে এর ব্যাকগ্রাউন্ডের রঙটি পরিবর্তন করতে হবে।

Answer 2

এটির জন্য আপনাকে এজ্যাক্সের দরকার নেই, শরীরের উপাদানটির ব্যাকগ্রাউন্ড-রঙের বৈশিষ্ট্যটি নির্ধারণ করার জন্য কিছু সরল জাভা লিপি:

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

আপনি যদি এটি এটির মতো করে করতে চান তবে এটি সার্ভার দ্বারা সূচিত হয়েছিল, আপনাকে সার্ভারটি পোল করতে হবে এবং তারপরে রঙটি পরিবর্তন করতে হবে।

Comments

আক্ষরিক উত্তর দেওয়ার জন্য: প্রশ্নটি পটভূমির নয়, পটভূমির রঙ পরিবর্তনের বিষয়ে ছিল।

— উলফ

Answer 3

আমি পূর্বের পোস্টারের সাথে একমত যে রঙটি রঙ পরিবর্তন classNameকরা একটি প্রাকৃতিক পদ্ধতি approach আমার যুক্তিটি হ'ল classNameএকটিটিকে একটি সংজ্ঞা হিসাবে বিবেচনা করা যেতে পারে "আপনি ব্যাকগ্রাউন্ডটি এই বা সেই রঙের হতে চান কেন" "

উদাহরণস্বরূপ, এটিকে লাল করা কেবল আপনাকে লাল করতে নয়, আপনি ব্যবহারকারীদের ত্রুটি সম্পর্কে অবহিত করতে চান। যেমন, AnErrorHasOccuredশরীরে ক্লাসনেম সেট করা আমার পছন্দসই বাস্তবায়ন হবে।

সিএসএসে

body.AnErrorHasOccured
{
  background: #f00;
}

জাভাস্ক্রিপ্টে:

document.body.className = "AnErrorHasOccured";

এটি আপনাকে এ অনুযায়ী আরও উপাদান স্টাইল করার বিকল্পগুলি ছেড়ে দেয় className। এবং এর মতো, classNameআপনার ধরণের একটি সেট করে পৃষ্ঠাটিকে একটি নির্দিষ্ট অবস্থা দিন।

Answer 4

এজেএক্স একটি অ্যাসিঙ্ক্রোনাস ফ্যাশনে জাভাস্ক্রিপ্ট এবং এক্সএমএল ব্যবহার করে সার্ভার থেকে ডেটা পাচ্ছে। আপনি সার্ভার থেকে রঙের কোডটি ডাউনলোড না করতে না চাইলে এটিই আপনি সত্যিকার অর্থে লক্ষ্য করছেন না!

তবে অন্যথায় আপনি জাভাস্ক্রিপ্ট সহ সিএসএস ব্যাকগ্রাউন্ড সেট করতে পারেন। আপনি যদি jQuery এর মতো কাঠামো ব্যবহার করেন তবে এটি এমন কিছু হবে:

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

অন্যথায়, এটি কাজ করা উচিত:

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

Answer 5

আপনি নিম্নলিখিত পদক্ষেপে এটি করতে পারেন পদক্ষেপ 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

আইডি সহ একটি উপাদান পরিবর্তন করতে

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

Answer 6

আমি এটিকে সত্যই "এজেএক্স" হিসাবে ক্লাস করব না। যাইহোক, নীচের মতো কিছুতে কৌশলটি করা উচিত:

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

Answer 7

সিএসএস পদ্ধতি:

আপনি যদি ধারাবাহিক রঙ দেখতে চান তবে এই কোডটি ব্যবহার করুন:

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 সেকেন্ডে পরিবর্তন করুন etc.

Answer 8

আপনি কেবল ব্যবহার করে কোনও পৃষ্ঠার পটভূমি পরিবর্তন করতে পারেন:

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

তবে নীচের স্ক্রিপ্টটি সেটটাইমআউট () ফাংশনটি ব্যবহার করে প্রতি 3 সেকেন্ডের পরে পৃষ্ঠার পটভূমি পরিবর্তন করবে:

$(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);
        })

আরও ডেমো পড়ুন

Answer 9

আমি এখানে একটি সিএসএস ক্লাস ব্যবহার দেখতে পছন্দ করব। এটি জাভাস্ক্রিপ্টে রঙ / হেক্স কোডগুলি পড়তে অসুবিধা এড়ানো যায়।

document.body.className = className;

Answer 10

এটি ড্রপ-ডাউন মেনু থেকে নির্বাচিত ব্যবহারকারীর পছন্দ অনুযায়ী পটভূমির রঙ পরিবর্তন করবে:

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>

Answer 11

এই স্ক্রিপ্ট উপাদানটি আপনার দেহের উপাদানগুলিতে যুক্ত করুন, রঙ হিসাবে পছন্দসই পরিবর্তন করুন:

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

Answer 12

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

Comments

কোথায় আপনার ব্যাখ্যা এবং তদ্ব্যতীত, এটি অন্যান্য উত্তর থেকে কীভাবে আলাদা?

— j08691

Answer 13

তবে <body>উপাদান উপস্থিত থাকার আগে আপনি গায়ের রঙটি কনফিগার করতে চান । যেতে যেতে যেতে এর সঠিক রঙ রয়েছে।

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

এটি আপনি <head>নথির মধ্যে বা আপনার জেএস ফাইলটিতে রাখতে পারেন।

এখানে খেলতে একটি দুর্দান্ত রঙ।

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

Answer 14

আমি নিম্নলিখিত কোডটি পরামর্শ দেব:

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

Answer 15

আপনি যদি কোনও বোতাম বা অন্য কোনও ইভেন্ট ব্যবহার করতে চান তবে এটি জেএসে ব্যবহার করুন:

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

Answer 16

আপনি কেবল ব্যবহার করে কোনও পৃষ্ঠার পটভূমি পরিবর্তন করতে পারেন:

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

আরও পড়ুন @ পটভূমির রঙ পরিবর্তন করা

Answer 17

বিকল্পভাবে, আপনি যদি আরজিবি নোটেশনে পটভূমির রঙ মান নির্দিষ্ট করতে চান তবে চেষ্টা করুন

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

যেখানে a, b, c রঙের মান

উদাহরণ:

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

Answer 18

জাভাস্ক্রিপ্ট ব্যবহার করে পটভূমি পরিবর্তন করার জন্য এটি সহজ কোডিং

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