jQuery 筆記 - 動態改變字體大小與背景顏色

更換背景與字體顏色與大小，是在許多頁面中很常見的功能，記錄一下這個寫法。

HTML 結構

HTML 的結構很簡單，就是把背景按鈕跟字體大小按鈕寫好，另外這邊使用 CSS 與 jQuery ClassName 分離管理，有需要 jQuery 的部分加「前綴詞 jq-xxx」，以便知道這邊要使用 jQuery 來控制。

<div class="wrap">
  <div class="header">
    <div class="btnGroup">
      <p>背景色：</p>
      <button class="btn btnBlack jq-black"></button>
      <button class="btn btnWhite jq-white"></button>
      <button class="btn btnYellow jq-yellow"></button>
    </div>
    <div class="fontSize">
      <button class="font jq-large">大</button>
      <button class="font jq-medium">中</button>
      <button class="font jq-small">小</button>
    </div>
  </div>

  <div class="main">
    <h2>經過刷新，立即。</h2>
    <p>
      滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
    </p>
    <p>
      滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
    </p>
    <p>
      滑鼠外掛提醒起來思想過了過去免費電影協助著名全部，下載手裡網遊不了穩定深刻回答此處感到下面姑娘都有，熱情本次工廠好了網站一級時期期間，日期基層幫助睡覺住了接到，屏東指南批准轉載使得聰明一部臺灣，資金自主春節全文只有人事專業開關朋友馬上什麼命運人才健康，效。
    </p>
  </div>
</div>

jQuery 寫法

因為字體大小與背景顏色算是滿固定的功能，也不需要運算，所以這邊直接動態修改屬性與值。
因為網頁預設字體大小是 16px，故將中字體就固定為 16px，這樣在起始頁面時，不會在更換字體時覺得奇怪。

//背景更改
$(".jq-black").click(function (e) {
  event.preventDefault(); //取消預設行為
  $(".main").css({
    "background-color": "#333",
    color: "#fff",
  });
});

$(".jq-white").click(function (e) {
  event.preventDefault(); //取消預設行為
  $(".main").css({
    "background-color": "#eeeeee",
    color: "#333",
  });
});

$(".jq-yellow").click(function (e) {
  event.preventDefault(); //取消預設行為
  $(".main").css({
    "background-color": "#fff891",
    color: "#333",
  });
});

//文字大小更改
$(".jq-large").click(function (e) {
  event.preventDefault(); //取消預設行為
  $("h2").css("font-size", "28px");
  $("p").css("font-size", "18px");
});

$(".jq-medium").click(function (e) {
  event.preventDefault(); //取消預設行為
  $("h2").css("font-size", "24px");
  $("p").css("font-size", "16px");
});

$(".jq-small").click(function (e) {
  event.preventDefault(); //取消預設行為
  $("h2").css("font-size", "20px");
  $("p").css("font-size", "12px");
});