ผู้ใช้สไตล์ HTML DOM เลือกคุณสมบัติ

คุณสมบัติ userSelect สไตล์ HTML DOM ส่งคืนและแก้ไขว่าข้อความขององค์ประกอบสามารถเลือกได้โดยผู้ใช้หรือไม่ในเอกสาร HTML

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์ -

ผู้ใช้ที่กลับมาเลือก

object.style.userSelect

การปรับเปลี่ยน userSelect

object.style.userSelect = “value”

คุณค่า

ในที่นี้ ค่าสามารถเป็น −

ค่า	คำอธิบาย
อัตโนมัติ	อนุญาตให้ผู้ใช้เลือกข้อความตามการตั้งค่าเบราว์เซอร์
ไม่มี	ไม่อนุญาตให้ผู้ใช้เลือกข้อความ
ข้อความ	ในนั้นผู้ใช้สามารถเลือกข้อความได้
ทั้งหมด	อนุญาตให้เลือกข้อความด้วยการคลิกเพียงครั้งเดียวแทนที่จะดับเบิลคลิก

ตัวอย่าง

ให้เราดูตัวอย่างคุณสมบัติ userSelect สไตล์ HTML DOM -

<!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;
   }
   .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>

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

ผู้ใช้สไตล์ HTML DOM เลือกคุณสมบัติ

คลิกที่ “ตั้งค่าผู้ใช้เลือก ” เพื่อตั้งค่า userSelect โดยที่ none เป็นค่าในองค์ประกอบย่อหน้า

ผู้ใช้สไตล์ HTML DOM เลือกคุณสมบัติ