Phương thức HTML DOM executeCommand ()

Phương thức HTML DOM executeCommand () được sử dụng để thực thi một lệnh được chỉ định trên phần có thể chỉnh sửa đang được người dùng chọn. Thuộc tính document.design nên được đặt để có một phần có thể chỉnh sửa ngay từ đầu.

Cú pháp

Sau đây là cú pháp cho phương thức executeCommand () -

document.execCommand(command, showUI, value)

Ở đây, giá trị dành cho một số lệnh cụ thể cần được hoàn thành, chẳng hạn như fontSize, forecolor, v.v. ShowUI là một giá trị boolean để chỉ định xem giá trị có được hiển thị hay không. Tên lệnh là lệnh cần được thực thi trên phần có thể chỉnh sửa.

Sau đây là các giá trị cho tham số lệnh -

"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"

Ví dụ

Chúng ta hãy xem một ví dụ cho phương thức executeCommand () -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Phương thức HTML DOM executeCommand ()

Khi nhấp đúp vào một số văn bản trên trang, định dạng của văn bản cụ thể đó sẽ thay đổi -

Phương thức HTML DOM executeCommand ()

Trong ví dụ trên -

Đầu tiên, chúng tôi đã liên kết một trình xử lý sự kiện với nội dung tài liệu của chúng tôi cho sự kiện nhấp đúp. Khi nhấp đúp vào bất kỳ phần nào của body con, nó sẽ thực thi phương thức changeText (). Phần thân con ở đây là các phần tử h1, h3 và p -

<body ondblclick="changeText()">

Đầu tiên, chúng tôi đặt chế độ thiết kế tài liệu thành bật để chúng tôi có thể chỉnh sửa tài liệu của mình. Hàm changeText () thực thi phương thức executeCommand () của tài liệu và chuyển các tham số của nó như fontSize, backColor, foreColor cùng với các giá trị tương ứng của chúng. Các giá trị này sẽ được áp dụng cho phần có thể chỉnh sửa được người dùng nhấp đúp -

Function changeText() {
document.execCommand("fontSize",true,"20px");
document.execCommand("backColor",true,"lightgreen");
document.execCommand("foreColor",true,"blue");