style.wordSpacingプロパティ

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>

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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク