কম্পিউটার টিউটোরিয়াল

HTML ontoggle ইভেন্ট অ্যাট্রিবিউট


HTML ontoggle ইভেন্ট অ্যাট্রিবিউটটি ট্রিগার হয় যখন একজন ইউজার <details> HTML এলিমেন্ট খোলে বা বন্ধ করে একটি HTML ডকুমেন্টে।

সিনট্যাক্স

নিচে সিনট্যাক্স দেওয়া হলো:

<details ontoggle=”script”>Content</details>

HTML ontoggle ইভেন্ট অ্যাট্রিবিউটের একটি উদাহরণ দেখা যাক:

উদাহরণ

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       height: 100vh;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;       text-align: center;       padding: 20px;    } </style> </head> <body> <h1>HTML ontoggle ইভেন্ট অ্যাট্রিবিউট ডেমো</h1> <details ontoggle="toggleFn()"> <summary>হায়! আমি সামারি এলিমেন্ট</summary> <p>এটি কিছু ডামি কন্টেন্ট সহ একটি প্যারাগ্রাফ।</p> </details> <script>    function toggleFn() {       document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";       document.body.style.color = "#fff";    } </script> </body> </html>

আউটপুট

HTML ontoggle ইভেন্ট অ্যাট্রিবিউট

এখন details HTML এলিমেন্ট খোলার চেষ্টা করুন ontoggle ইভেন্ট অ্যাট্রিবিউট কীভাবে কাজ করে তা পর্যবেক্ষণ করার জন্য।

HTML ontoggle ইভেন্ট অ্যাট্রিবিউট


  1. HTML ondragleave ইভেন্ট অ্যাট্রিবিউট

  2. HTML ondragenter ইভেন্ট অ্যাট্রিবিউট

  3. HTML ondragend ইভেন্ট অ্যাট্রিবিউট

  4. HTML onpageshow ইভেন্ট অ্যাট্রিবিউট