জেভাস্ক্রিপ্ট এইচটিএমএল ডম - সিএসএস পরিবর্তন

HTML DOM JavaScript-এর মাধ্যমে HTML এলিমেন্টের শৈলী পরিবর্তন করতে অনুমদন করে

এইভাবে HTML শৈলী পরিবর্তন করুন

এই গ্রামার ব্যবহার করে এইভাবে একটি HTML এলিমেন্টের শৈলী পরিবর্তন করুন:

document.getElementById(id).style.প্রতিভা = নতুন শৈলী

নিচের উদাহরণ এই শৈলীকে পরিবর্তন করে <p> এলিমেন্টের শৈলী:

ইনস্ট্যান্স

<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>উপরোক্ত অনুচ্ছেদটি স্ক্রিপ্ট দ্বারা পরিবর্তন করা হয়েছে。</p>
</body>
</html>

আপনার হাতে পরীক্ষা করুন

ইভেন্ট ব্যবহার করা

HTML DOM ইভেন্ট ঘটলে কোড চালু করার জন্য আপনাকে অনুমতি দেয়

যখন 'কোনও কিছু' HTML এলিমেন্টের ওপর ঘটে, ব্রাউজার ইভেন্ট তৈরি করে:

  • কোনও এলিমেন্টকে ক্লিক করলে
  • পাতা লোড হলে
  • ইনপুট ফিল্ডটি পরিবর্তিত হলে

আপনি এই টিউটোরিয়ালের পরবর্তী চপে ইভেন্ট সম্পর্কে আরও জানতে পাবেন。

এই ইনস্ট্যান্সটিতে, ব্যবহারকারী বাটনটি ক্লিক করলে, id="id1" এবং HTML এলিমেন্টটির শৈলী পরিবর্তন করা হবে:

ইনস্ট্যান্স

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">আমার শিরোনাম 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
ক্লিক করুন!
</button>
</body>
</html>

আপনার হাতে পরীক্ষা করুন

আরও ইনস্ট্যান্স

Visibility
কিভাবে এলিমেন্টটিকে অদৃশ্য করা যায়।আপনি এলিমেন্টটিকে দেখাতে চান কি?

HTML DOM Style অবজেক্ট রেফারেন্স ম্যানুয়াল

সমস্ত HTML DOM শৈলী এট্রিবিউটস পাওয়ার জন্য আমাদের HTML DOM Style অবজেক্ট রেফারেন্স ম্যানুয়াল。