JavaScript Document queryCommandState() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method

Definition

document.queryCommandState(command) reports whether the current selection already has a given execCommand applied — for example, whether selected text is bold. It returns true, false, or null (unknown).

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call document.queryCommandState. Start with this line.

JavaScript
document.queryCommandState(command)
CallWhat it does
document.queryCommandState(command)Primary signature.
document.queryCommandState(...)Call with the arguments your case needs.

Built into the browser. Call queryCommandState(...) on document — no import required.

Library declarations
JavaScript
document.queryCommandState(command)

Parameters

ParameterDescription
commandRequired. An execCommand name to inspect

Return Value

Return ValueDescription
*true, false, or null

JavaScript Examples

Example 1 — Read the Bold State

Ask whether the current selection is bold. Handle true, false, and null.

JavaScript
const state = document.queryCommandState("bold");

if (state === true) {
  console.log("bold is applied");
} else if (state === false) {
  console.log("bold is not applied");
} else {
  console.log("bold state unknown (null)");
}
Try It Yourself

How It Works

  1. Probe the selection. queryCommandState("bold") inspects current formatting.
  2. Branch on the result. Use strict checks so null is not treated as false.
  3. Explain each case. Applied, not applied, or unknown (mixed).
  4. No toggle yet. This example only reads state — it does not call execCommand.

Example 2 — MDN Pattern: Check State, Then Toggle Bold

Explain what the next toggle will do, then run execCommand("bold").

JavaScript
const state = document.queryCommandState("bold");
let message;

switch (state) {
  case true:
    message = "Next toggle removes bold";
    break;
  case false:
    message = "Next toggle applies bold";
    break;
  default:
    message = "Bold state is indeterminable";
}

console.log(message);
document.execCommand("bold");
Try It Yourself

How It Works

  1. Read first. Capture state before changing anything (MDN example flow).
  2. Map to a message. true means bold is on; false means off; default covers null.
  3. Toggle with execCommand. Legacy path flips bold on the selection.
  4. Use carefully. Prefer modern editors for new products; this is a legacy UX pattern.

Example 3 — State vs Enabled

Compare “already applied?” with “can run now?” for the same command.

JavaScript
const cmd = "bold";

const enabled =
  typeof document.queryCommandEnabled === "function"
    ? document.queryCommandEnabled(cmd)
    : false;

const state =
  typeof document.queryCommandState === "function"
    ? document.queryCommandState(cmd)
    : null;

console.log("enabled:", enabled);
console.log("state:", state);
Try It Yourself

How It Works

  1. Pick one command. Here "bold" keeps the comparison clear.
  2. Ask enabled. Can the browser run bold in this context right now?
  3. Ask state. Is bold already applied to the selection?
  4. Toolbar rule. Disable from enabled; show pressed from state.

Browser Support

Document.queryCommandState() is a legacy browser DOM API. MDN marks it Deprecated and Non-standard (not part of any current specification).

✓ Deprecated · Non-standard

Document.queryCommandState()

Legacy selection-state probe for editor commands — still present in many engines; avoid for new apps.

Legacy Not for new apps
Google Chrome Legacy editing probe
Legacy
Microsoft Edge Legacy editing probe
Legacy
Mozilla Firefox Legacy editing probe
Legacy
Apple Safari Legacy editing probe
Legacy
Opera Follow Chromium legacy path
Legacy
Internet Explorer Historic rich-text path
Legacy
queryCommandState() Avoid for new code

Bottom line: Widely present for legacy editing, but do not build new products on it. Prefer modern editors. See the MDN Document.queryCommandState() reference.

Frequently Asked Questions

It tells you whether the current selection already has a given Document.execCommand() command applied — for example, whether the selection is bold.
Yes. MDN marks it Deprecated and Non-standard. It is not part of any current specification and is no longer on track to become a standard.
A boolean (true or false), or null if the state is unknown. Treat null as indeterminate — for example a mixed selection.
Only when maintaining legacy execCommand() toolbars. MDN notes it can help build a complete UX (pressed vs unpressed). Prefer modern editor libraries for new products.
queryCommandEnabled() asks whether a command can run right now. queryCommandState() asks whether that command’s formatting is already applied to the current selection.
When the browser cannot decide — often a mixed selection that is partly bold and partly not. MDN’s example treats a non-boolean result as indeterminable.

Next: queryCommandSupported()

Learn how to check whether a legacy editor command exists in the browser at all.

queryCommandSupported() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

12 people found this page helpful