JQuery 实时改变网页字体大小的代码
有时为了浏览体验的需要，需要让用户自行调整页面的字体大小。
这里介绍下用jquery实时改变网页字体大小的方法。
分别定义三个class：
increaseFont、decreaseFont、resetFont 的元素。
1，添加click事件
<script>
/*
对页面上的字体增大、缩小、恢复原始大小
需要在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;
});
}); </script>
2，实时改变网页字体大小，jQuery版
jquery改变网页字体大小，对字体最大能放大的位数或最小能缩小的倍数加了限制。
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适时改变网页字体大小，jQuery版---www.jbxue.com</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>
<!-- 引入jQuery -->
<script src="/jquery/jquery1.3.2.js" type="text/javascript"></script>
<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>
<div class="msg">
<div class="msg_caption">
<span class="bigger" >放大</span>
<span 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>
您可能感兴趣的文章：
JQuery 改变页面字体大小的实现代码(实时改变网页字体大小)
JQuery 实时改变网页字体大小的代码
jquery更换文章内容与改变字体大小的实现代码
jquery更换文章内容与改变字体大小代码
jQuery字体调整插件 jFontSize
Jquery网页出现的乱码问题的三种解决方法
使用JQUERY进行后台页面布局控制DIV实现左右式
jquery easyui 分页的使用方法
Firefox浏览器更改字体大小的几种方法
彻底弄懂CSS盒子模式(DIV布局快速入门)