HTML - DOM文档execCommand()方法

HTML DOM文档**execCommand()**方法用于在用户选择的可编辑区域执行指定的命令。文档的**document.designMode**属性应设置为拥有文档中的可编辑区域。此方法现已**弃用**。

语法

document.execCommand(command, showUI, value);

参数

此方法接受三个参数，如下所示。

参数	描述
command	这是您想要在文档的可编辑区域执行的命令。以下是可执行命令的列表： 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
showUI	这是一个布尔值，指定是否显示 UI。
value	有些命令需要指定值。它保存指定命令的值。

返回值

它返回一个布尔值，对于支持的命令返回 true，对于不支持的命令返回 false。

HTML DOM文档'execCommand()'方法示例

以下示例说明了使用不同命令的execCommand()方法的使用。

更改字体大小和颜色

在以下示例中，字体颜色及其背景颜色以及字体大小会在双击时更改。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM document execCommand() Method
    </title>
</head>
<body ondblclick="changeText()">
    <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, "5px");
            document.execCommand("backColor", true, "#04af2f");
            document.execCommand("foreColor", true, "white");
        }
    </script>
</body>
</html>

将句子加粗

在以下示例中，bold 命令用于在双击时将句子加粗。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM document execCommand() Method
    </title>
</head>
<body ondblclick="changeText()">
    <h3>
        Double click on any text to change 
        its color and make it bold
    </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("backColor", true, "#04af2f");
            document.execCommand("foreColor", true, "white");
            document.execCommand("bold");
        }
    </script>
</body>
</html>

将句子居中对齐

在以下示例中，justifyCenter 命令在双击时使用。

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM document execCommand() Method
    </title>
</head>
<body ondblclick="changeText()">
    <h3>
        Double click on any text to make 
        it justifyCenter
    </h3>
    <p>Welcome to Tutorials Point...</p>
    <script>
        document.designMode = "on";
        function changeText() {
            document.execCommand("backColor", true, "#04af2f");
            document.execCommand("foreColor", true, "white");
            document.execCommand("justifyCenter");
        }
    </script>
</body>
</html>

支持的浏览器

方法
execCommand()	否	否	否	否	否

html_dom_document_reference.htm

打印页面