জাভাস্ক্রিপ্ট এইচটিএমএল ডোম - সিএসএস পরিবর্তন
এইচটিএমএল ডোম জাভাস্ক্রিপ্টকে এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে সাহায্য করে।
এইচটিএমএলের স্টাইল পরিবর্তন
এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করতে নিচের সিন্টেক্স ব্যবহার করুনঃ
উদাহরণ
document.getElementById(id).style.property = new style
নিম্নলিখিত উদাহরণে একটি <div> এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<div id="div1">স্যাট একাডেমী</div>
<script>
document.getElementById("div1").style.color = "teal";
</script>
<p>উপরের এলিমেন্টের স্টাইল script দ্বারা পরিবর্তন করা হয়েছে।</p>
</body>
</html>
ফলাফল
ইভেন্টের ব্যবহার
কোনো ইভেন্ট ঘটলে এইচটিএমএল ডোম একটি কোড সম্পাদনে সম্মতি দেয়।
এইচটিএমএল এলিমেন্টে যখন কোনো "ঘটনা ঘটে" তখন ব্রাউজারের মাধ্যমে ইভেন্ট তৈরি হয়ঃ
- একটি এলিমেন্টের উপর ক্লিক করা হলে
- পেজ লোড হলে
- ইনপুট ফিল্ড পরিবর্তিত হলে
এই টিউটোরিয়ালের পরবর্তী পরিচ্ছেদে আপনি ইভেন্ট সম্পর্কে আরো জানতে পারবেন।
এই উদাহরণে, একজন ব্যবহারকারী বাটনে ক্লিক করলে id="div1" যুক্ত এইচটিএমএল এলিমেন্টের স্টাইল পরিবর্তন করা হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<div id="div1">স্যাট একাডেমী</div>
<button type="button" onclick="document.getElementById('div1').style.color = 'teal'">
ক্লিক করুন</button>
</body>
</html>
ফলাফল
এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স
সকল এইচটিএমএল ডোম স্টাইল প্রোপার্টির জন্য আমাদের এইচটিএমএল ডোম স্টাইল অবজেক্ট রেফারেন্স দেখুন।