style.wordSpacingは、要素のスタイル属性のword-spacingプロパティの値を取得、もしくは、設定するプロパティ。
word-spacingプロパティは、単語と単語の間の長さを指定することができる。
構文
取得
var $wordSpacing = $elementReference.style.wordSpacing;
戻り値
要素のスタイル属性のword-spacingプロパティの値。
設定
$elementReference.style.wordSpacing = "normal length | inherit";
- normal length | inherit
- 下記の何れかの方法で指定する。初期設定値は「normal」。
- normal：標準。
- length：「px」や「em」などの単位を付けた数値で指定。
- inherit：親要素の設定を継承。
サンプル
サンプルのword-spacingプロパティの値：
Sample Element
サンプル要素
サンプルの動作について
各ボタンをクリックすると、ボタン名のテキストを「word-spacingプロパティ」の値に設定する。設定値を「サンプルのword-spacingプロパティの値：」の右横に表示する。「Sample」と「Element」の間の距離を指定した長さにする。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setWordSpacing( $wordSpacing ) {
var $element = document.getElementById( "sample" );
$element.style.wordSpacing = $wordSpacing;
var $wordSpacing = $element.style.wordSpacing;
document.getElementById( "sampleOutput" ).innerHTML = $wordSpacing;
}
</script>
function setWordSpacing( $wordSpacing ) {
var $element = document.getElementById( "sample" );
$element.style.wordSpacing = $wordSpacing;
var $wordSpacing = $element.style.wordSpacing;
document.getElementById( "sampleOutput" ).innerHTML = $wordSpacing;
}
</script>
HTML
<button onclick="setWordSpacing('normal');">normal</button>
<br />
<button onclick="setWordSpacing('3px');">3px</button>
<button onclick="setWordSpacing('6px');">6px</button>
<button onclick="setWordSpacing('3pt');">3pt</button>
<button onclick="setWordSpacing('6pt');">6pt</button>
<br />
<button onclick="setWordSpacing('0.1em');">0.1m</button>
<button onclick="setWordSpacing('0.2em');">0.2em</button>
<button onclick="setWordSpacing('0.4em');">0.4em</button>
<button onclick="setWordSpacing('0.6em');">0.6em</button>
<button onclick="setWordSpacing('0.8em');">0.8em</button>
<button onclick="setWordSpacing('1em');">1em</button>
<button onclick="setWordSpacing('1.5em');">1.5em</button>
<button onclick="setWordSpacing('2em');">2em</button>
<br />
<button onclick="setWordSpacing('inherit');">inherit</button>
<br />
<p>サンプルのword-spacingプロパティの値：<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; border: 1px solid red; background-color: yellow;">
Sample Element <br /> サンプル要素
</p>
<br />
<button onclick="setWordSpacing('3px');">3px</button>
<button onclick="setWordSpacing('6px');">6px</button>
<button onclick="setWordSpacing('3pt');">3pt</button>
<button onclick="setWordSpacing('6pt');">6pt</button>
<br />
<button onclick="setWordSpacing('0.1em');">0.1m</button>
<button onclick="setWordSpacing('0.2em');">0.2em</button>
<button onclick="setWordSpacing('0.4em');">0.4em</button>
<button onclick="setWordSpacing('0.6em');">0.6em</button>
<button onclick="setWordSpacing('0.8em');">0.8em</button>
<button onclick="setWordSpacing('1em');">1em</button>
<button onclick="setWordSpacing('1.5em');">1.5em</button>
<button onclick="setWordSpacing('2em');">2em</button>
<br />
<button onclick="setWordSpacing('inherit');">inherit</button>
<br />
<p>サンプルのword-spacingプロパティの値：<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; border: 1px solid red; background-color: yellow;">
Sample Element <br /> サンプル要素
</p>