คุณสมบัติ HTML DOM designMode

คุณสมบัติ designMode ของ HTML DOM ให้เราระบุได้ว่าเอกสารทั้งหมดสามารถแก้ไขได้หรือไม่ ทำให้เอกสาร HTML ทำงานเป็นเอดิเตอร์ WYSIWYG (What You See Is What You Get) เนื่องจากเราสามารถแก้ไขเอกสาร HTML ได้ คุณสมบัตินี้ตั้งค่าเริ่มต้นเป็น "off" การตั้งเป็น "on" จะทำให้แก้ไขเอกสารได้

ไวยากรณ์ (Syntax)

document.designMode = "on|off"

ที่นี่ "off" เป็นค่าเริ่มต้น การตั้งเป็น "on" อนุญาตให้แก้ไขเอกสาร

ตัวอย่าง (Example)

<!DOCTYPE html> <html> <body> 
<h1>Document designMode Property</h1> 
<p> This is a paragraph with some text</p> 
<button type="button">BUTTON1</button> 
<script> 
  document.designMode="on"; 
</script> </body> </html>

ผลลัพธ์ (Output)

ผลลัพธ์ที่ได้:

หลังจากแก้ไขเอกสาร:

คำอธิบายโค้ด

สร้างองค์ประกอบ HTML หลายตัว เช่น <h1>, <p>, <button>:

<h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button>

ตั้ง document.designMode = "on" ทำให้แก้ไขเอกสาร HTML ได้ สามารถเปลี่ยนข้อความใดๆ ได้ และลบองค์ประกอบโดยการล้างข้อความของมัน เช่น ลบข้อความปุ่ม ปุ่มก็จะหายไป:

<script> document.designMode="on"; </script>