Document : méthode queryCommandState()

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Note : Bien que la méthode execCommand() soit obsolète, il existe encore des cas d'utilisation valides pour lesquels il n'existe pas encore d'alternatives viables, comme mentionné dans l'article execCommand(). Dans ces cas, vous pouvez trouver cette méthode utile pour implémenter une expérience utilisateur·ice complète, mais testez pour garantir la compatibilité entre les navigateurs.

La méthode queryCommandState() de l'interface Document indique si la sélection actuelle a une certaine commande Document.execCommand() appliquée.

html
<div contenteditable="true">Sélectionnez une partie de ce texte&nbsp;!</div>
<button>Essayez de tester l'état de la commande 'gras'</button>
<hr />
<div id="sortie"></div>

hr,
button {
  margin: 1rem 0;
}

JavaScript

js
function mettreEnGras() {
  const state = document.queryCommandState("bold");
  let message;
  switch (state) {
    case true:
      message = "Le formatage en gras sera supprimé du texte sélectionné.";
      break;
    case false:
      message = "Le texte sélectionné sera affiché en gras.";
      break;
    default:
      message = "L'état de la commande 'gras' est indéterminable.";
      break;
  }
  document.querySelector("#sortie").textContent = `Résultat : ${message}`;
  document.execCommand("bold");
}

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