HTML DOM execCommand() 메서드

<시간/>

HTML DOM execCommand() 메서드는 사용자가 선택한 편집 가능한 섹션에 지정된 명령을 실행하는 데 사용됩니다. document.design 속성은 처음부터 편집 가능한 섹션을 갖도록 설정해야 합니다.

구문

다음은 execCommand() 메서드의 구문입니다. -

document.execCommand(command, showUI, value)

여기서 value는 fontSize, forecolor 등과 같이 완료해야 하는 특정 명령에 대한 것입니다. 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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM execCommand() 메서드

페이지의 일부 텍스트를 두 번 클릭하면 해당 텍스트의 서식이 변경됩니다. -

HTML DOM execCommand() 메서드

위의 예에서 -

먼저 더블 클릭 이벤트에 대한 문서 본문과 이벤트 핸들러를 연결했습니다. body 자식 중 하나를 두 번 클릭하면 changeText() 메서드가 실행됩니다. 여기서 body 자식은 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");