HTML DOM Style userSelect प्रॉपर्टी

HTML DOM Style userSelect प्रॉपर्टी यह नियंत्रित करती है कि किसी एलिमेंट का टेक्स्ट उपयोगकर्ता द्वारा चुना जा सकता है या नहीं।

सिंटैक्स

निम्नलिखित सिंटैक्स है:

userSelect प्राप्त करना

object.style.userSelect

userSelect सेट करना

object.style.userSelect = "value"

मान (Values)

यहां value निम्नलिखित हो सकते हैं:

उदाहरण

आइए 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>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

Set userSelect बटन पर क्लिक करके पैराग्राफ एलिमेंट पर userSelect को none सेट करें: