HTML DOM スタイルの wordSpacing プロパティとは？単語間隔の取得・設定方法を解説
HTML DOM の style オブジェクトが持つ wordSpacing プロパティは、HTML ドキュメント内のテキストにおける「単語と単語の間隔（ワードスペーシング）」を取得したり、動的に変更したりするために使用します。
構文
wordSpacing プロパティの基本的な構文は以下の通りです。
値の取得
object.style.wordSpacing値の設定
object.style.wordSpacing = "value"指定できる値
value には以下の値を指定できます。
| 値 | 説明 |
|---|---|
| initial | このプロパティの値をデフォルト値に設定します。 |
| inherit | 親要素からこのプロパティの値を継承します。 |
| normal | 通常の単語間隔を設定します。 |
| length | px や em などの長さの単位で単語間のスペースを指定します。 |
サンプルコード
それでは、HTML DOM style の wordSpacing プロパティを使った具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem 0;
}
</style>
</head>
<body>
<h1>DOM Style wordSpacing Property Example</h1>
<p>This is a paragraph element.</p>
<button onclick="add()" class="btn">Change wordSpacing</button>
<script>
function add() {
document.querySelector('p').style.wordSpacing = "30px"
}
</script>
</body>
</html>実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
「Change wordSpacing」ボタンをクリックすると、JavaScript によって段落テキストの単語間隔が 30px に広がります。
補足：日本語テキストでの注意点
wordSpacing は主に英語など、単語がスペースで区切られる言語を想定したプロパティです。日本語のように単語間にスペースを含まない文章では、見た目への影響が限定的になる点に注意してください。文字同士の間隔を調整したい場合は、letterSpacing プロパティを使用するとよいでしょう。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの wordSpacing プロパティとは？単語間隔の取得・設定方法を解説
HTML DOM の style オブジェクトが持つ wordSpacing プロパティは、HTML ドキュメント内のテキストにおける「単語と単語の間隔（ワードスペーシング）」を取得したり、動的に変更したりするために使用します。 構文 wordSpacing プロパティの基本的な構文は以下の通りです。 値の取得 object.style.wordSpacing 値の設定 object.style.wordSpacing = value 指定できる値 value には以下の値を指定できます。 値説明 initialこのプロパティの値をデフォルト値に設定します。 inherit親要