iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 39

JS 39 - 平滑調整網頁字型大小

大家好!

今天我們要實作讓網頁的字型大小能平滑地縮放。
我們進入今天的主題吧!


樣式

body {
    font-size: 16px;
    transition: font-size 0.5s;
}

body[data-font-size="18"] {
    font-size: 18px;
}

body[data-font-size="20"] {
    font-size: 20px;
}

body 內的元素,其 font-size 必須要是 em 單位。


程式碼

Felix(window).on('load', function () {
    Felix('#font-size-selector').on('click', function (e) {
        const size = [16, 18, 20];
        const index = [].slice.call(this.children).indexOf(e.target);
        Felix('body')[0].dataset.fontSize = size[index];
    });
});

實測

<div id="font-size-selector">
    <span>A</span>
    <span>A</span>
    <span>A</span>
</div>

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 38 - 實作 Tab 頁籤
下一篇
JS 40 - 向下滾動網頁即自動隱藏導覽列
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言