style.fontVariantは、要素のスタイル属性のfont-variantプロパティの値を取得、もしくは、設定するプロパティ。
font-variantプロパティは、スモールキャップフォントを指定することができる。
スモールキャップフォントとは、アルファベットの小文字を、小文字サイズの大文字で表示するフォントのこと。
構文
取得
var $fontVariant = $elementReference.style.fontVariant;
戻り値
要素のスタイル属性のfont-variantプロパティの値。
設定
$elementReference.style.fontVariant = "normal | small-caps | inherit";
- normal | small-caps | inherit
- 下記の何れかの値で指定する。初期設定値は「normal」。
- normal：標準。スモールキャップフォントにしない。
- small-caps：スモールキャップフォントにする。
- inherit：親要素の設定を継承。
サンプル
サンプルのfont-variantプロパティの値：
Sample Element / サンプル要素
サンプルの動作について
- 「normal」ボタンをクリックすると、「Sample Element / サンプル要素 」のテキストをスモールキャップフォントにしない。「サンプルのfont-variantプロパティの値：」の右横に「normal」と表示。
- 「small-caps」ボタンをクリックすると、「Sample Element / サンプル要素 」のテキストをスモールキャップフォントにする。「サンプルのfont-variantプロパティの値：」の右横に「small-caps」と表示。
- 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのfont-variantプロパティの値：」の右横に「inherit」と表示。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setFontVariant( $fontVariant ) {
var $element = document.getElementById( "sample" );
$element.style.fontVariant = $fontVariant;
var $fontVariant = $element.style.fontVariant;
document.getElementById( "sampleOutput" ).innerHTML = $fontVariant;
}
</script>
function setFontVariant( $fontVariant ) {
var $element = document.getElementById( "sample" );
$element.style.fontVariant = $fontVariant;
var $fontVariant = $element.style.fontVariant;
document.getElementById( "sampleOutput" ).innerHTML = $fontVariant;
}
</script>
HTML
<button onclick="setFontVariant('normal');">normal</button>
<button onclick="setFontVariant('small-caps');">small-caps</button>
<button onclick="setFontVariant('inherit');">inherit</button>
<br />
<p>サンプルのfont-variantプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>
<button onclick="setFontVariant('small-caps');">small-caps</button>
<button onclick="setFontVariant('inherit');">inherit</button>
<br />
<p>サンプルのfont-variantプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="padding: 10px; border: 1px solid red; background-color: yellow;">
Sample Element / サンプル要素
</div>