JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

ttx9n · 发表于 2012-3-5 17:15:00

分别定义三个class为increaseFont、decreaseFont、resetFont 的元素。为其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;
});
});

实时改变网页字体大小，jQuery版
适时改变网页字体大小，引入了jQuery，并且对字体最大能放大的位数或最小能缩小的倍数加了限制，避免一些无意义的功能，当字体小到规定值时，再次点击缩小功能已经不起作用，这样做似乎更加人性化。

<!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>适时改变网页字体大小，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> 
 
 
<script type="text/javascript"> 
$(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); 
}); 
}); 
</script> 
</head> 
<body> 
 
 
放大 
缩小 
 
 
<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> 
 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

溪谷玉贤 · 发表于 2022-12-1 21:37:40

终于找到了，我擦

回复用户5 · 发表于 2023-2-2 04:05:30

的沙发水电费水电费

8ayoqrpj · 发表于 2023-3-30 18:58:18

sdsadsadsadf

fiyeid · 发表于 2023-8-29 11:02:28

激动人心，无法言表！

rveqwdpw5 · 发表于 2023-9-2 06:26:20

源码源码源码源码源码源码源码源码源码源码源码源码源码

64000928 · 发表于 2023-9-28 14:02:17

快更新啊，我擦

81708585 · 发表于 2023-9-28 21:02:55

谢谢小Y分享

pb_tjc · 发表于 2024-5-24 18:48:32

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

gyalp · 发表于 2024-6-5 09:07:11

非常vbcbvcvbvcb

账号		自动登录	找回密码
密码			立即注册

[JavaScript] JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)

相关帖子