เมธอด HTML DOM execCommand() ใช้สำหรับดำเนินการคำสั่งที่ระบุในส่วนที่แก้ไขได้ซึ่งผู้ใช้เลือกไว้ ควรตั้งค่าคุณสมบัติ document.design ให้มีส่วนที่แก้ไขได้ตั้งแต่แรก
ไวยากรณ์
ต่อไปนี้เป็นรูปแบบคำสั่ง execCommand() -
document.execCommand(command, showUI, value)
ในที่นี้ ค่ามีไว้สำหรับคำสั่งเฉพาะบางคำสั่งที่ต้องทำให้สมบูรณ์ เช่น fontSize สีพื้นหน้า ฯลฯ showUI เป็นค่าบูลีนสำหรับระบุว่าควรแสดงค่าหรือไม่ ชื่อคำสั่งคือคำสั่งที่ต้องดำเนินการในส่วนที่แก้ไขได้
ต่อไปนี้เป็นค่าสำหรับพารามิเตอร์คำสั่ง -
"backColor", "bold", "createLink", "copy", "cut", "defaultParagraphSeparator", "delete", "fontName", "fontSize", "foreColor", "formatBlock", "forwardDelete", "insertHorizontalRule", "insertHTML", "insertImage", "insertLineBreak", "insertOrderedList", "insertParagraph", "insertText", "insertUnorderedList", "justifyCenter", "justifyFull", "justifyLeft", "justifyRight", "outdent", "paste", "redo", "selectAll", "strikethrough", "styleWithCss", "superscript", "undo", "unlink", "useCSS"
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับวิธี execCommand() -
<!DOCTYPE html>
<html>
<body ondblclick="changeText()">
<h1>execCommand() method example</h1>
<h3>double click on any text to change its fontsize and color</h3>
<p>Here is some text for being clicked upon. Some sample text is here too </p>
<script>
document.designMode = "on";
function changeText() {
document.execCommand("fontSize",true,"20px");
document.execCommand("backColor",true,"lightgreen");
document.execCommand("foreColor",true,"blue");
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อดับเบิลคลิกข้อความบนหน้า รูปแบบของข้อความนั้นจะเปลี่ยนไป -
ในตัวอย่างข้างต้น −
ก่อนอื่นเราได้เชื่อมโยงตัวจัดการเหตุการณ์กับเนื้อหาเอกสารของเราสำหรับเหตุการณ์ดับเบิลคลิก เมื่อดับเบิลคลิกที่ส่วนย่อยของร่างกายใด ๆ มันจะดำเนินการเมธอด changeText() ลูกร่างกายที่นี่คือองค์ประกอบ h1, h3 และ p -
<body ondblclick="changeText()">
ก่อนอื่นเราตั้งค่าโหมดการออกแบบเอกสารเป็นเปิด เพื่อให้เราสามารถแก้ไขเอกสารของเราได้ ฟังก์ชัน changeText() ดำเนินการ execCommand() ของเอกสารและส่งผ่านพารามิเตอร์ เช่น fontSize, backColor, foreColor พร้อมกับค่าที่เกี่ยวข้อง ค่าเหล่านี้จะนำไปใช้กับส่วนที่แก้ไขได้โดยผู้ใช้ดับเบิลคลิก -
Function changeText() {
document.execCommand("fontSize",true,"20px");
document.execCommand("backColor",true,"lightgreen");
document.execCommand("foreColor",true,"blue"); 