为中小型企业构建网站,网站开发软件公司,网页链接成整体通过网站,宏发建设有限公司网站有时为了浏览体验的需要#xff0c;需要让用户自行调整页面的字体大小。这里介绍下用jquery实时改变网页字体大小的方法。分别定义三个class#xff1a;increaseFont、decreaseFont、resetFont 的元素。1#xff0c;添加click事件复制代码 代码示例:/*对页面上的字体增大、缩…有时为了浏览体验的需要需要让用户自行调整页面的字体大小。这里介绍下用jquery实时改变网页字体大小的方法。分别定义三个classincreaseFont、decreaseFont、resetFont 的元素。1添加click事件复制代码 代码示例:/*对页面上的字体增大、缩小、恢复原始大小需要在html页面中定义三个元素元素的class分别为 resetFont、increaseFont、decreaseFont在本文件的JQuery事件中分别定义了三个元素的click事件来实现增大、缩小、恢复原始大小*/$(function () {//取得字体大小在html标记下定义了font-sizevar originalFontSize $(html).css(font-size);//恢复默认字体大小$(.resetFont).click(function () {$(html).css(font-size, originalFontSize);//JavaScript不向下执行return false;});//加大字体,某个元素的class定义为increaseFont$(.increaseFont).click(function () {//取得当前字体大小 后缀px,pt,pcvar 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,pcvar currentFontSize $(html).css(font-size);//取得当前字体大小parseFloat()转为float类型去除后缀var currentFontSizeNumber parseFloat(currentFontSize);//重新定义字体大小var newFontSize currentFontSizeNumber * 0.9;//重写样式表$(html).css(font-size, newFontSize);//JavaScript不向下执行return false;});}); 2实时改变网页字体大小jQuery版jquery改变网页字体大小对字体最大能放大的位数或最小能缩小的倍数加了限制。例子复制代码 代码示例:适时改变网页字体大小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. Thisis some text. This is some text. This is some text. This is some text. This is sometext. 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. Thisis some text. This is some text.
