HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。
構文
quotes プロパティの基本的な構文は以下のとおりです。
値の取得
object.style.quotes値の設定
object.style.quotes = "value"設定できる値
value には以下の値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に戻します。 |
| none | 引用符を表示しないようにします（開始・終了の引用符が生成されなくなります）。 |
| string string string string | 任意の文字列を引用符として指定します。最初の2つの値が第一階層（外側）の引用符の開始と終了を、残りの2つの値が第二階層（内側）の引用符の開始と終了を表します。 |
サンプルコード
以下は、HTML DOM の style quotes プロパティを使った具体的な例です。ボタンをクリックすると、<q> 要素の引用符が動的に変更されます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
q {
margin: 20px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 20px;
}
</style>
</head>
<body>
<h1>DOM Style quotes Property Example</h1>
<q>I'm a q element with some dummy text.</q>
<button onclick="add()" class="btn">Change quotes</button>
<script>
function add() {
document.querySelector('q').style.quotes = "'#' '#'";
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような画面が表示されます。
「Change quotes」ボタンをクリックすると、<q> 要素を囲む引用符が「#」に変更されます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの textTransform プロパティとは？使い方を解説
DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。 構文 textTransform プロパティの基本的な構文は以下のとおりです。 値の取得（Returning textTransform） object.style.textTransform 値の設定（Modifying textTransform） object.style.textTransform = value;