জাভাস্ক্রিপ্টের সাহায্যে কীভাবে একটি ওয়েবসাইটে (মাউসওভারে) পটভূমির রঙ পরিবর্তন করবেন

ভ্যানিলা জাভাস্ক্রিপ্টের সাহায্যে কোন ওয়েবসাইটের উপর মাউস নাড়াচাড়া করার সময় কীভাবে পটভূমির রঙ পরিবর্তন করতে হয় তা জানুন।

HTML

এখানে একটি সাধারণ HTML পৃষ্ঠার জন্য কিছু মার্কআপ রয়েছে:

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your move over this page</h1>
  </body>
</html>

ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে যখন একজন ব্যবহারকারী পৃষ্ঠার যেকোনো অংশে তাদের মাউস নিয়ে যান, আপনাকে এটি করতে হবে:

<body> টার্গেট করুন উপাদান এবং একটি পরিবর্তনশীল মধ্যে এটির একটি রেফারেন্স সংরক্ষণ করুন।
window-এ একজন ইভেন্ট শ্রোতা বস্তু যা mouseover এর জন্য শোনে ঘটনা।
backgroundColor প্রয়োগ করুন একটি রঙ মান সহ সম্পত্তি।

আপনার জাভাস্ক্রিপ্ট ফাইলে নিম্নলিখিত কোড যোগ করুন:

const bodyElement = document.querySelector("body")

window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

এখন ব্যবহারকারী আপনার ওয়েবসাইটের যেকোনো অংশে তাদের মাউস নিয়ে যাওয়ার সাথে সাথে পটভূমির রঙ তাৎক্ষণিকভাবে লাল হয়ে যায়।

কোড ডেমো দেখুন।

রঙের মানগুলির জন্য আপনি হয় আসল নাম ব্যবহার করতে পারেন (যেমন "লাল"), হেক্স অথবা rgba মান।