快捷導(dǎo)航

JQuery 改變頁面字體大小的實(shí)現(xiàn)代碼(實(shí)時(shí)改變網(wǎng)頁字體大小)

更新時(shí)間：2012年03月05日 17:15:00 作者：

分別定義三個(gè)class為increaseFont、decreaseFont、resetFont 的元素。為其click事件添加事件

 
/* 
對(duì)頁面上的字體增大、縮小、恢復(fù)原始大小 
需要在html頁面中定義三個(gè)元素 
元素的class分別為 resetFont、increaseFont、decreaseFont 
在本文件的JQuery事件中分別定義了三個(gè)元素的click事件來實(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; 
}); 
}); 

實(shí)時(shí)改變網(wǎng)頁字體大小，jQuery版
適時(shí)改變網(wǎng)頁字體大小，引入了jQuery，并且對(duì)字體最大能放大的位數(shù)或最小能縮小的倍數(shù)加了限制，避免一些無意義的功能，當(dāng)字體小到規(guī)定值時(shí)，再次點(diǎn)擊縮小功能已經(jīng)不起作用，這樣做似乎更加人性化。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>適時(shí)改變網(wǎng)頁字體大小，jQuery版</title> <style> * { 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;} </style>    </head> <body> <div   id="vvxyksv9kd"   class="msg"> <div   id="vvxyksv9kd"   class="msg_caption"> <span id="vvxyksv9kd"    class="bigger" >放大</span> <span id="vvxyksv9kd"    class="smaller" >縮小</span> </div> <div> <p id="para"> 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. </p> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: