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

HTML DOM Style userSelect প্রপার্টি একটি এলিমেন্টের টেক্সট ব্যবহারকারী নির্বাচন (select) করতে পারবে কিনা তা নির্ধারণ ও পরিবর্তন করতে ব্যবহৃত হয়।

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

userSelect মান পাওয়ার জন্য (Returning userSelect)

object.style.userSelect

userSelect মান পরিবর্তন করার জন্য (Modifying userSelect)

object.style.userSelect = "value"

মান (Values)

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

উদাহরণ (Example)

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

<!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; 
    } 
    .show { 
        margin: 1rem 0; 
    } 
</style> 
</head> 
<body> 
<h1>DOM Style userSelect Property Example</h1> 
<p style="direction:ltr">This is a paragraph element with some dummy text.</p> 
<button onclick="add()" class="btn">Set userSelect</button> 
<div class="show"></div> 
<script> 
    function add() { 
        document.querySelector('p').style.userSelect = "none"; 
        document.querySelector('.show').innerHTML = "Now you can't select the above paragraph text"; 
    } 
</script> 
</body> 
</html>

আউটপুট (Output)

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

Set userSelect বাটনে ক্লিক করলে প্যারাগ্রাফ এলিমেন্টের userSelect none হিসেবে সেট হবে, ফলে টেক্সট নির্বাচন করা যাবে না: