0%

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

different

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

HTML 結構

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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,這樣在起始頁面時,不會在更換字體時覺得奇怪。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//背景更改
$(".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");
});