JavaScript document.queryCommandState() Method

You are Here:

JavaScript document.queryCommandState() Method

The document.queryCommandState() method returns the current state of the specified command.

Example

HTML Online Editor
<!DOCTYPE html> <html> <body onkeydown="myFunction()"> <script> document.designMode = "on"; function myFunction(){ if(event.keyCode == 16){ var state = document.queryCommandState("bold"); if(state) alert("Bold formatting will be removed"); else alert("Bold formatting will be added"); document.execCommand('bold'); } } </script> </body> </html>

Syntax

document.queryCommandState(cmd)

Parameter Values

ValueTypeExplanation
cmdRequiredA DOMString specifying the name of the command to determine state.
The following are the list of DOMString.

backColor

Changes the document background color.

bold

Toggles bold on/off for the selection.

ClearAuthenticationCache

Clears all authentication credentials from the cache.

contentReadOnly

Makes the content document either read-only or editable.

copy

Copies the current selection to the clipboard.

createLink

Creates an hyperlink from the selection, but only if there is a selection.

cut

Removes the current selection and copies it to the clipboard.

decreaseFontSize

Adds a <small> tag around the selection.

defaultParagraphSeparator

Changes the paragraph separator used when new paragraphs are created in editable text regions.

delete

Deletes the current selection.

enableAbsolutePositionEditor

Enables or disables the grabber that allows absolutely-positioned elements to be moved around.

enableInlineTableEditing

Enables or disables the table row/column insertion and deletion controls.

enableObjectResizing

Enables or disables the resize handles on images, tables, and absolutely-positioned elements and other resizable objects.

fontName

Changes the font name for the selection.

fontSize

Changes the font size for the selection.

foreColor

Changes a font color for the selection.

formatBlock

Adds an HTML block-level element around the line containing the current selection.

forwardDelete

Deletes the character ahead of the cursor's position. Similar to pressing the Delete key on a windows keyboard.

heading

Adds a heading element around a selection.

hiliteColor

Changes the background color for the selection.

increaseFontSize

Adds a <big> tag around the selection.

indent

Indents the line containing the selection.

insertBrOnReturn

Controls whether the Enter key inserts a <br> element, or splits the current block element into two.

insertHorizontalRule

Inserts a <hr> element at the insertion point, or replaces the selection with it.

insertHTML

Inserts an HTML string at the selection.

insertImage

Inserts an image at the Selection.

insertOrderedList

Creates a numbered ordered list for the selection.

insertUnorderedList

Creates a bulleted unordered list for the selection.

insertParagraph

Inserts a paragraph around the selection.

insertText

Inserts the given plain text at the selection.

italic

Toggles italics on/off for the selection.

justifyCenter

Centers the selection.

justifyFull

Justifies the selection.

justifyLeft

Left-Justifies the selection.

justifyRight

Right-justifies the selection.

outdent

Outdents the line containing the selection.

paste

Pastes the clipboard contents at the selection.

redo

Redoes the previous undo command.

removeFormat

Removes all formatting from the current selection.

selectAll

Selects all of the content of the editable region.

strikeThrough

Toggles strikethrough on/off for the selection.

subscript

Toggles subscript on/off for the selection.

superscript

Toggles superscript on/off for the selection .

underline

Toggles underline on/off for the selection.

undo

Undoes the last executed command.

unlink

Removes the anchor element from a selected hyperlink.

styleWithCSS

Replaces the useCSS command.

useCSS

Toggles the use of HTML tags or CSS for the generated markup.

Return Values

ValueExplanation
trueIf the command is active.
falseIf the command is not active.

Reminder

Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in JavaScript.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author