style.letterSpacingプロパティ

style.letterSpacingは、要素のスタイル属性のletter-spacingプロパティの値を取得、もしくは、設定するプロパティ。

letter-spacingプロパティは、文字と文字の間の長さを指定することができる。

構文

取得

var $letterSpacing = $elementReference.style.letterSpacing;

戻り値

要素のスタイル属性のletter-spacingプロパティの値。

設定

$elementReference.style.letterSpacing = "normal length | inherit";
normal length | inherit
下記の何れかの方法で指定する。初期設定値は「normal」。
  • normal:標準。
  • length:「px」や「em」などの単位を付けた数値で指定。
  • inherit:親要素の設定を継承。

サンプル





サンプルのletter-spacingプロパティの値:

Sample Element
サンプル要素

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを「letter-spacingプロパティ」の値に設定する。設定値を「サンプルのletter-spacingプロパティの値:」の右横に表示する。「Sample Element <br /> サンプル要素」の文字と文字の間隔を、指定した長さにする。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setLetterSpacing( $letterSpacing ) {
 var $element = document.getElementById( "sample" );
 $element.style.letterSpacing = $letterSpacing;
 var $letterSpacing = $element.style.letterSpacing;
 document.getElementById( "sampleOutput" ).innerHTML = $letterSpacing;
}
</script>

HTML

<button onclick="setLetterSpacing('normal');">normal</button>
<br />
<button onclick="setLetterSpacing('3px');">3px</button>
<button onclick="setLetterSpacing('6px');">6px</button>
<button onclick="setLetterSpacing('3pt');">3pt</button>
<button onclick="setLetterSpacing('6pt');">6pt</button>
<br />
<button onclick="setLetterSpacing('0.1em');">0.1m</button>
<button onclick="setLetterSpacing('0.2em');">0.2em</button>
<button onclick="setLetterSpacing('0.4em');">0.4em</button>
<button onclick="setLetterSpacing('0.6em');">0.6em</button>
<button onclick="setLetterSpacing('0.8em');">0.8em</button>
<button onclick="setLetterSpacing('1em');">1em</button>
<button onclick="setLetterSpacing('1.5em');">1.5em</button>
<button onclick="setLetterSpacing('2em');">2em</button>
<br />
<button onclick="setLetterSpacing('inherit');">inherit</button>
<br />
<p>サンプルのletter-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オブジェクト, テキスト, プロパティ, リファレンス パーマリンク