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

时间:2021-05-26

复制代码 代码如下:

$(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,并且对字体最大能放大的位数或最小能缩小的倍数加了限制,避免一些无意义的功能,当字体小到规定值时,再次点击缩小功能已经不起作用,这样做似乎更加人性化。
适时改变网页字体大小,jQuery版 * { 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;} 放大 缩小

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.

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章