[JavaScript] 文字を斜体にする

投稿日：2016年11月14日更新日：2018年4月28日

JavaScriptで文字を斜体にするには、style.fontStyleを使用します。

サンプルソース

例）ボタンを押すごとにid="target"要素の文字を斜体にする

function changeFontStyle(idname){
  var obj = document.getElementById(idname);
  if(obj.style.fontStyle == "italic"){
    obj.style.fontStyle = "normal";
  }else{
    obj.style.fontStyle  = "italic";
  }
}

function changeFontStyle(idname){

var obj = document.getElementById(idname);

if(obj.style.fontStyle == "italic"){

obj.style.fontStyle = "normal";

}else{

obj.style.fontStyle = "italic";

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <p id="target">ABCDEFG</p>
  <input type="button" value=" ボタン " onclick="changeFontStyle('target');" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p id="target">ABCDEFG</p>

</body>

</html>

実行サンプル

ボタンを押すと、斜体/普通が切り替わります。

ABCDEFG

解説

斜体フォントが無い文字で指定しても斜体にはなりません。
italic と oblique の違いは、斜体は同じでも見た目が少し異なります。
fontStyleには以下の値を指定できます。
【style.fontStyle】

値意味

normal 普通

italic イタリック体フォント

oblique 斜体フォント

【style.fontStyle】
値	意味
normal	普通
italic	イタリック体フォント
oblique	斜体フォント

執筆者：とら