HTML DOM Style visibility প্রপার্টি

HTML DOM Style visibility প্রপার্টি একটি HTML এলিমেন্টের দৃশ্যমানতা (visibility) নির্ণয় ও পরিবর্তন করতে ব্যবহৃত হয়। এটি নির্দেশ করে যে কোনো এলিমেন্ট ওয়েব পৃষ্ঠায় দৃশ্যমান থাকবে বা নেই।

সিনট্যাক্স (Syntax)

দৃশ্যমানতা পাওয়ার জন্য (Returning visibility)

object.style.visibility

দৃশ্যমানতা পরিবর্তন করার জন্য (Modifying visibility)

object.style.visibility = "value"

মান (Values)

এখানে value নিম্নলিখিত موارد হতে পারে:

মান	ব্যাখ্যা
initial	এই প্রপার্টির মান ডিফল্ট মান সেট করে।
inherit	এই প্রপার্টির মান প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার হিসেবে পায়।
hidden	এলিমেন্টটি দৃশ্যমান নয়, কিন্তু এর উপস্থিতি লেআউটকে প্রভাবিত করে (স্থান ঘেরে রাখে)।
visible	এলিমেন্টটি দৃশ্যমান।
collapse	টেবিলের সারি বা কলামে এলিমেন্টটি দৃশ্যমান নয়, কিন্তু এর উপস্থিতি লেআউটকে প্রভাবিত করে।

উদাহরণ (Example)

HTML DOM Style visibility প্রপার্টির একটি উদাহরণ দেখুন:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    body { 
        color: #000; 
        background: lightblue; 
        height: 100vh; 
    } 
    .btn { 
        background: #db133a; 
        border: none; 
        height: 2rem; 
        border-radius: 2px; 
        width: 40%; 
        display: block; 
        color: #fff; 
        outline: none; 
        cursor: pointer; 
        margin: 1rem 0; 
    } 
</style> 
</head> 
<body> 
<h1>DOM Style visibility Property Example</h1> 
<p>I'm paragraph element with some dummy text</p> 
<button onclick="add()" class="btn">Set visibility</button> 
<script> 
    function add() { 
        document.querySelector('p').style.visibility = "hidden"; 
    } 
</script> 
</body> 
</html>

আউটপুট (Output)

এটি নিম্নলিখিত আউটপুট তৈরি করবে:

HTML DOM Style visibility প্রপার্টি

Set visibility বাটনে ক্লিক করলে প্যারাগ্রাফ এলিমেন্টের visibility hidden হিসেবে সেট হবে:

HTML DOM Style visibility প্রপার্টি