Javascript 文字のスタイルを変える

プログラム

2022.08.24

Javascriptで文字のスタイルを変更する方法の備忘録です。

Javascriptで文字のスタイルを変更するとは
プログラムコード
実行
まとめ

Javascriptで文字のスタイルを変更するとは

Javascriptでサイト内の文字のスタイルを変更します。

数字キーの１を押せば文字のスタイル変更し、数字キーの２を押せば文字のスタイルが元に戻るというプログラムを紹介します。

プログラムコード

HTMLでは変更したい文字にidを付けます。実際は2文字だけを変更するプログラムです。

      <b id="text1"> 1文字</b>
      <b id="text2"> 2文字 </b>
      <b id="text3"> 3文字 </b>

Javascirptのコードは下記になります。style.color、style.background、style.fontSizeとsytleの後に続いているのはCSSコードになります。その他の文字のスタイルを変更したい場合は、style.XXとすればいいです。スタイルを元に戻したい場合はnullにすればいいだけです。

document.addEventListener(
        "keydown",
        function (event) {
          if (event.keyCode == 49) {
            stylechange();
          } else if (event.keyCode == 50) {
            styleclear();
          }
        },
        true
);


function stylechange() {
          document.getElementById("text2").style.color = "pink";
          document.getElementById("text2").style.background = "gray";
          document.getElementById("text2").style.fontSize = "50px";
      }

function styleclear() {
        var element = document.getElementById("text2");

        element.style.color = null;
        element.style.background = null;
        element.style.fontSize = null;
      }

実行

では、数字キーの１と２を押して、下記の２文字が変更するのを確認して下さい。

1文字 2文字 3文字

まとめ

先述した通り、sytleの後に続いているのはCSSコードになります。なので、フォントスタイルの変更や斜体にも変更することが出来ますよね。

あと、一つだけ変えたい場合はclassではなく、idにすることをおススメします。

「役に立った！」と思れましたら、下のSNSボタンで記事のシェアをしていただけると嬉しいです！

JavaScript コードレシピ集

技術評論社

JavaScriptによるWeb開発のための、究極のレシピ集が登場。制作の現場で使われる定番テクニックからプロ技まで余すところなく集めました。基本文法/文字や数値の取り扱い/データの取り扱い/ブラウザーの操作/ユーザーアクション/HTML要素の操作/アニメーション/画像、音声、動画/スマートフォンのセンサーなど、目的別にレシピを整理