HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

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()メソッドが実行されます。ここでのボディの子は、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");

  1. HTML DOM writeln()メソッド

    HTML DOM writeln()は、複数の式(HTMLまたはJavaScript)をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加します。 構文 以下は構文です- document.write(agruments) 例 HTML DOMドキュメントのwriteln()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM writeln()</title&g

  2. HTML DOM write()メソッド

    HTML DOM write()は、複数の式(HTMLまたはJavaScript)をドキュメントに直接書き込む機能をユーザーに提供します。 注 −このメソッドは、ドキュメント内のHTMLコードがある場合はそれを上書きし、新しい行に引数を追加しません。 構文 以下は構文です- document.write(arguments) 例 HTML DOMドキュメントのwrite()メソッドの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>HTML DOM write()</title> &l