HTML DOMのfontStyleプロパティとは？使い方と実行例をわかりやすく解説
fontStyleプロパティとは
HTML DOMのStyleオブジェクトが持つfontStyleプロパティは、テキストのフォントスタイルを設定または取得するために使用されます。このプロパティを利用することで、要素のテキストに対して「通常（normal）」「イタリック（italic）」「斜体（oblique）」のいずれかのスタイルを動的に指定できます。
JavaScriptから要素のスタイルを操作する際に便利なプロパティで、ボタンのクリックなどのユーザー操作に応じてテキストの表示スタイルを切り替えたい場合などに活用されます。
構文
fontStyleプロパティを設定する際の構文は以下のとおりです。
object.style.fontStyle = "normal|italic|oblique|initial|inherit"
指定できる値は以下のとおりです。
- normal：通常のスタイルで表示します（初期値）。
- italic：イタリック体（斜めに傾いた書体）で表示します。
- oblique：斜体で表示します。
- initial：このプロパティを初期値に戻します。
- inherit：親要素のフォントスタイルを継承します。
実行例
次の例では、ボタンをクリックすると2つのdiv要素のフォントスタイルがイタリックに変更されます。あわせて、変更が完了したことを示すメッセージも表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
#demo2,#demo1 {
font-family: 'times new roman';
font-size: 25px;
}
</style>
<script>
function changeFontStyle() {
document.getElementById("demo1").style.fontStyle="italic";
document.getElementById("demo2").style.fontStyle="italic";
document.getElementById("Sample").innerHTML="The font style has been changed for the above paragraphs.";
}
</script>
</head>
<body>
<div id="demo1" >This is demo text 1</div>
<div id="demo2">This is demo text 2</div>
<p>Change the above divs font style by clicking the below button</p>
<button onclick="changeFontStyle()">Change fontStyle </button>
<p id="Sample"></p>
</body>
</html>出力結果
ページを表示すると、2つのdiv要素にサンプルテキストが通常スタイルで表示されます。
続いて、「Change fontStyle」ボタンをクリックすると、両方のdiv要素のテキストがイタリック体に変わり、メッセージが表示されます。
このように、fontStyleプロパティを使えばJavaScriptから簡単にテキストのフォントスタイルを制御できます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOMのfontStyleプロパティとは？使い方と実行例をわかりやすく解説
fontStyleプロパティとはHTML DOMのStyleオブジェクトが持つfontStyleプロパティは、テキストのフォントスタイルを設定または取得するために使用されます。このプロパティを利用することで、要素のテキストに対して「通常（normal）」「イタリック（italic）」「斜体（oblique）」のいずれかのスタイルを動的に指定できます。JavaScriptから要素のスタイルを操作する際に便利なプロパティで、ボタンのクリックなどのユーザー操作に応じてテキストの表示スタイルを切り替えたい場合などに活用されます。構文fontStyleプロパティを設定する際の構文は以下のとおりです。ob