files/ja/web/api/document/querycommandstate/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

---
title: Document.queryCommandState()
slug: Web/API/Document/queryCommandState
tags:
  - API
  - DOM
  - Reference
translation_of: Web/API/Document/queryCommandState
---
<div>{{ApiRef("DOM")}}{{obsolete_header}}</div>

<p><strong><code>queryCommandState()</code></strong> メソッドは、現在の選択範囲に特定の {{domxref("Document.execCommand()")}} コマンドが適用されているかどうかを知らせます。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: js notranslate">queryCommandState(String <var>command</var>)
</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<p><code><var>command</var></code> は {{domxref("Document.execCommand()")}} のコマンドです。</p>

<h3 id="Return_value" name="Return_value">返値</h3>

<p><code>queryCommandState()</code> は {{jsxref("Boolean")}} 値、または状態が不明な場合は <code>null</code> を返す可能性があります。</p>

<h2 id="Example" name="Example">例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;div contenteditable="true"&gt;Select a part of this text!&lt;/div&gt;
&lt;button onclick="makeBold();"&gt;Test the state of the 'bold' command&lt;/button&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js notranslate">function makeBold() {
  var state = document.queryCommandState("bold");
  switch (state) {
    case true:
      alert("The bold formatting will be removed from the selected text.");
      break;
    case false:
      alert("The selected text will be displayed in bold.");
      break;
    case null:
      alert("The state of the 'bold' command is indeterminable.");
      break;
  }
  document.execCommand('bold');
}</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample('Example')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://w3c.github.io/editing/execCommand.html#querycommandstate()">execCommand</a></td>
   <td></td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.Document.queryCommandState")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{domxref("HTMLElement.contentEditable")}}</li>
 <li>{{domxref("document.designMode")}}</li>
 <li><a href="/ja/docs/Rich-Text_Editing_in_Mozilla">Mozilla のリッチテキスト編集</a></li>
 <li><code>queryCommandState()</code> に関するブラウザーのバグ: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li>
</ul>