. 代碼如下:
/*
對頁面上的字體增大、縮小、恢復原始大小
需要在html頁面中定義三個元素
元素的class分別為 resetFont、increaseFont、decreaseFont
在本文件的JQuery事件中分別定義了三個元素的click事件來實現增大、縮小、恢復原始大小
*/
$(function () {
//取得字體大小，在html標記下定義了font-size
var originalFontSize = $("html").css("font-size");
//恢復默認字體大小
$(".resetFont").click(function () {
$("html").css("font-size", originalFontSize);
//JavaScript不向下執行
return false;
});
//加大字體,某個元素的class定義為increaseFont
$(".increaseFont").click(function () {
//取得當前字體大小 後綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小，parseFloat()轉為float類型去除後綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//新定義的字體大小
var newFontSize = currentFontSizeNumber * 1.1;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執行
return false;
});
//減小字體，某個元素的class定義為decreaseFont
$(".decreaseFont").click(function () {
//取得當前字體大小 後綴px,pt,pc
var currentFontSize = $("html").css("font-size");
//取得當前字體大小，parseFloat()轉為float類型去除後綴
var currentFontSizeNumber = parseFloat(currentFontSize);
//重新定義字體大小
var newFontSize = currentFontSizeNumber * 0.9;
//重寫樣式表
$("html").css("font-size", newFontSize);
//JavaScript不向下執行
return false;
});
});
實時改變網頁字體大小，jQuery版
適時改變網頁字體大小，引入了jQuery，並且對字體最大能放大的位數或最小能縮小的倍數加了限制，避免一些無意義的功能，當字體小到規定值時，再次點擊縮小功能已經不起作用，這樣做似乎更加人性化。
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]