HTML - DOM Document execCommand() Method

Quiz

HTML DOM documentexecCommand() method is used for executing a command specified on the editable section that is being selected by the user. The document.design property should be set to have an editable section in the document. This method is now deprecated.

Syntax

document.execCommand(command, showUI, value);

Parameter

This method accepts three parameters as listed below.

Parameters	Description
command	It is the command which you want to execute in editable section of the document. Below is the list of commands to execute 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	It is a Boolean value which specifies whether UI to be shown or not.
value	There are some commands which needs value to be specified. It holds value for the command specified

Return Value

It returns a boolean value, true for supported commands and false for unsupported commands.

Examples of HTML DOM document 'execCommand()' Method

The following examples illustrates use of execCommand() method using different commands.

Change the Font Size and Color

In the following example, font color and it's background color is changed along with it's font size on double click.

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

Make the sentence Bold

In the following example bold command is used to make the sentence bold on double click.

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

Make the sentence Justify Center

In the following example justifyCenter command is used on double click.

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

Supported Browsers

Method
execCommand()	No	No	No	No	No

html_dom.htm

Print Page