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>
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>
<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>