JavaScript Document queryCommandState() Method

What You’ll Learn

document.queryCommandState() is a deprecated, non-standard instance method that reports whether the current selection already has a given execCommand() applied (see MDN Document: queryCommandState()). Learn the true / false / null return values, MDN’s bold toolbar example, how it differs from queryCommandEnabled(), and five try-it labs.

Introduction

A rich-text Bold button should look pressed when the selection is already bold, and unpressed when it is not. Legacy editors used document.queryCommandState("bold") for that.

MDN: the method tells you if the current selection has a certain Document.execCommand() command applied. Unlike queryCommandEnabled() (can I run it?), this API asks “is it already on?”

Related tutorials: execCommand(), queryCommandEnabled(), designMode, getSelection().

Understanding document.queryCommandState()

An instance method on the page’s document object that reads whether a named editing command is applied to the current selection (MDN).

• command — a command from Document.execCommand() (MDN).
• Return value — boolean, or null if the state is unknown (MDN).
• true — the command is applied (e.g. selection is bold).
• false — the command is not applied.
• null — indeterminable / unknown (mixed selection or engine gap).
• vs enabled — enabled = can run; state = already applied.

📝 Syntax

General form of Document.queryCommandState (MDN):

queryCommandState(command)

Parameters

• command — a command from Document.execCommand() (MDN). Common ones for beginners: "bold", "italic", "underline".

Return value

A boolean, or null if the state is unknown (MDN).

MDN-style bold message map

const state = document.queryCommandState("bold");
let message;
switch (state) {
  case true:
    message = "The bold formatting will be removed from the selected text.";
    break;
  case false:
    message = "The selected text will be displayed in bold.";
    break;
  default:
    message = "The state of the 'bold' command is indeterminable.";
    break;
}
console.log(message);
document.execCommand("bold");

⚖️ queryCommandState vs queryCommandEnabled vs execCommand

Examples Gallery

Examples follow MDN Document: queryCommandState() and practical beginner patterns. Always treat this API as legacy.

function makeBold() {
  const state = document.queryCommandState("bold");
  let message;
  switch (state) {
    case true:
      message = "The bold formatting will be removed from the selected text.";
      break;
    case false:
      message = "The selected text will be displayed in bold.";
      break;
    default:
      message = "The state of the 'bold' command is indeterminable.";
      break;
  }
  console.log(message);
  document.execCommand("bold");
}

document.querySelector("button").addEventListener("click", makeBold);

The selected text will be displayed in bold.
(or the remove / indeterminable message, then bold toggles)

const hasApi = typeof document.queryCommandState === "function";
console.log("queryCommandState available:", hasApi);

if (hasApi) {
  console.log("bold state:", document.queryCommandState("bold"));
} else {
  console.log("Use a modern editor library instead");
}

queryCommandState available: true
bold state: false
(results vary by selection)

const btn = document.getElementById("boldBtn");
const editor = document.getElementById("editor");

function syncBoldButton() {
  editor.focus();
  const state =
    typeof document.queryCommandState === "function"
      ? document.queryCommandState("bold")
      : false;
  const pressed = state === true;
  btn.setAttribute("aria-pressed", String(pressed));
  btn.classList.toggle("is-pressed", pressed);
  console.log("bold pressed UI:", pressed, "(raw state:", state + ")");
}

editor.addEventListener("mouseup", syncBoldButton);
editor.addEventListener("keyup", syncBoldButton);
btn.addEventListener("click", () => {
  document.execCommand("bold", false, null);
  syncBoldButton();
});

bold pressed UI: false (raw state: false)
(becomes true when selection is bold)

const names = ["bold", "italic", "underline"];
const lines = names.map((name) => {
  const state =
    typeof document.queryCommandState === "function"
      ? document.queryCommandState(name)
      : null;
  return name + ": " + String(state);
});
console.log(lines.join("\n"));

bold: false
italic: false
underline: false
(values change after formatting the selection)

const names = ["bold", "italic", "underline"];
const lines = names.map((name) => {
  const enabled =
    typeof document.queryCommandEnabled === "function"
      ? document.queryCommandEnabled(name)
      : false;
  const state =
    typeof document.queryCommandState === "function"
      ? document.queryCommandState(name)
      : null;
  return name + " → enabled=" + enabled + ", state=" + state;
});
console.log(lines.join("\n"));

bold → enabled=true, state=false
italic → enabled=true, state=false
underline → enabled=true, state=false
(exact values vary)

🚀 Common Use Cases

• Legacy toolbar pressed state — highlight Bold / Italic when active (MDN UX note).
• Explain before toggle — MDN example: tell the user whether bold will be added or removed.
• Maintaining old editors — understand why buttons light up on selection change.
• Interview / history knowledge — state vs enabled vs supported in the execCommand family.
• Not a modern editor foundation — prefer dedicated libraries for new products.
• Expect inconsistencies — MDN points to known browser bugs around this API.

📝 Notes

• MDN: Deprecated and Non-standard; not part of any current specification.
• MDN: returns a boolean or null if the state is unknown.
• MDN: useful with rare remaining execCommand use cases for a complete toolbar UX.
• Test cross-browser — MDN links known inconsistencies for this API.
• Do not confuse state (applied?) with enabled (can run?) or supported (exists?).
• Related: execCommand(), queryCommandEnabled(), designMode, getSelection().

💡 Best Practices