有時為了瀏覽體驗的需要，需要讓用戶自行調整頁面的字體大小。

這里介紹下用jquery實時改變網頁字體大小的方法。

分別定義三個class：

increaseFont、decreaseFont、resetFont 的元素。

1，添加click事件

復制代碼 代碼示例:

/*

對頁面上的字體增大、縮小、恢復原始大小

需要在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;

});

});

2，實時改變網頁字體大小，jQuery版

jquery改變網頁字體大小，對字體最大能放大的位數或最小能縮小的倍數加了限制。

例子：

復制代碼 代碼示例:

適時改變網頁字體大小，jQuery版---www.jbxue.com

* { margin:0; padding:0; }

.msg {width:300px; margin:100px; }

.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; }

.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

$(function(){

$("span").click(function(){

var thisEle = $("#para").css("font-size");

var textFontSize = parseFloat(thisEle , 10);

var unit = thisEle.slice(-2); //獲取單位

var cName = $(this).attr("class");

if(cName == "bigger"){

if( textFontSize <= 22 ){

textFontSize += 2;

}

}else if(cName == "smaller"){

if( textFontSize >= 12 ){

textFontSize -= 2;

}

}

$("#para").css("font-size", textFontSize + unit);

});

});

放大

縮小

This is some text. This is some text. This is some text. This is some text. This

is some text. This is some text. This is some text. This is some text. This is some

text. This is some text. This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text. This is some text. This

is some text. This is some text.

總結

以上是生活随笔為你收集整理的字体变换大小的html代码,JQuery 实时改变网页字体大小的代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。