読者です 読者をやめる 読者になる 読者になる

思考停止するな

ネットワークとかアプリケーションとかWebとか

JavaScriptだけでページ内の文字サイズを変更する方法

スポンサーリンク

JavaScriptだけでページ内の文字サイズを変更する方法についてです。

今回はJSで文字サイズを小、中、大の3段階に変えるコードを書いてみました。

文字の大きさは
小 → 75%
中 → 100%
大 → 150%
と完全に決め打ちです。

HTML部分
小、中、大のボタンを作ってそれぞれで呼び出すメソッドを定義します。

<button onclick="s()"></button>
<button onclick="m()"></button>
<button onclick="l()"></button>

JavaScript部分

<script>

  //文字サイズを小さくする
  function s() { 
    document.body.style.fontSize = 75 + '%'; 
  }

  //文字サイズを普通にする
  function m() { 
    document.body.style.fontSize = 100 + '%'; 
  }

  //文字サイズを大きくする
  function l()  { 
    document.body.style.fontSize = 150 + '%'; 
  }
</script>

上記のように書くだけでJSだけで文字サイズの変更ができました。