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