有時(shí)為了瀏覽體驗(yàn)的需要，需要讓用戶自行調(diào)整頁(yè)面的字體大小。

這里介紹下用jquery實(shí)時(shí)改變網(wǎng)頁(yè)字體大小的方法。

分別定義三個(gè)class：

increaseFont、decreaseFont、resetFont 的元素。

1，添加click事件

復(fù)制代碼 代碼示例:

/*

對(duì)頁(yè)面上的字體增大、縮小、恢復(fù)原始大小

需要在html頁(yè)面中定義三個(gè)元素

元素的class分別為 resetFont、increaseFont、decreaseFont

在本文件的JQuery事件中分別定義了三個(gè)元素的click事件來(lái)實(shí)現(xiàn)增大、縮小、恢復(fù)原始大小

*/

$(function () {

//取得字體大小，在html標(biāo)記下定義了font-size

var originalFontSize = $("html").css("font-size");

//恢復(fù)默認(rèn)字體大小

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

$("html").css("font-size", originalFontSize);

//JavaScript不向下執(zhí)行

return false;

});

//加大字體,某個(gè)元素的class定義為increaseFont

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

//取得當(dāng)前字體大小 后綴px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得當(dāng)前字體大小，parseFloat()轉(zhuǎn)為float類型去除后綴

var currentFontSizeNumber = parseFloat(currentFontSize);

//新定義的字體大小

var newFontSize = currentFontSizeNumber * 1.1;

//重寫樣式表

$("html").css("font-size", newFontSize);

//JavaScript不向下執(zhí)行

return false;

});

//減小字體，某個(gè)元素的class定義為decreaseFont

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

//取得當(dāng)前字體大小 后綴px,pt,pc

var currentFontSize = $("html").css("font-size");

//取得當(dāng)前字體大小，parseFloat()轉(zhuǎn)為float類型去除后綴

var currentFontSizeNumber = parseFloat(currentFontSize);

//重新定義字體大小

var newFontSize = currentFontSizeNumber * 0.9;

//重寫樣式表

$("html").css("font-size", newFontSize);

//JavaScript不向下執(zhí)行

return false;

});

});

2，實(shí)時(shí)改變網(wǎng)頁(yè)字體大小，jQuery版

jquery改變網(wǎng)頁(yè)字體大小，對(duì)字體最大能放大的位數(shù)或最小能縮小的倍數(shù)加了限制。

例子：

復(fù)制代碼 代碼示例:

適時(shí)改變網(wǎng)頁(yè)字體大小，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.

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。