在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来:

     function setFontSize (id,content,params){
var oTarget = document.getElementById(id),
content = document.getElementById(content),
size = params.size || 14,
maxSize = params.maxSize || 20,
step = params.step || 2;
oBtn = '<input type="button" value="+"/><input type="button" value="-" />';
oBtn1 = null,
oBtn2 = null; oTarget.innerHTML = oBtn;
oBtn1 = oTarget.childNodes[0];
oBtn2 = oTarget.childNodes[1]; oBtn1.onclick=function(){
if(size+step <= maxSize){
size+=step;
}else{
size = maxSize;
this.className+=' disabled';
this.disabled = true;
}
oBtn2.className.replace('disabled','');
oBtn2.disabled = false;
content.style.fontSize = size +'px';
}
oBtn2.onclick=function(){
if(size-step >= 12){
size-=step;
}else{
size = 12;
this.className+=' disabled'
this.disabled = true;
}
oBtn1.className.replace('disabled','');
oBtn1.disabled = false;
content.style.fontSize = size +'px';
}
}

调用方式:

 setFontSize(id,contentid,{size:,maxSize,step:});
/*
* id :用于存放增加或减小两个按钮的父级盒子的id。
* contentid: 存放内容的id。
* {} 一个对象,用于提供设置的参数。
|— szie : 字体起始(默认)大小。
|— maxSize : 最大字体。
|— step : 增长的步长值。
*/

提示:可以通过font-size:0的方式来隐藏Input元素的value值,然后自定义按钮的样式。

JavaScript 控制字体大小设置的更多相关文章

  1. Pycharm用鼠标滚轮控制字体大小的

    Pycharm用鼠标滚轮控制字体大小的   一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> I ...

  2. (转)Pycharm用鼠标滚轮控制字体大小

    转自: Pycharm用鼠标滚轮控制字体大小 - 暗黒骑士 - 博客园 https://www.cnblogs.com/fyknight/p/6937482.html ---------------- ...

  3. eclipse护眼颜色和字体大小设置

    ♣eclipse护眼颜色和关键字颜色设置 ♣eclipse字体大小设置(包括jsp , .xml ,.java) 1.Eclipse字体大小调整: 窗口(Window)-首选项(Preferences ...

  4. eclipse中的字体大小设置和背景色设置

    1.字体大小设置 在basic下选择最后一个TextFont 护眼背景色设置 添加到自定义颜色后点确定 最后一步点apply

  5. html页面控制字体大小的js代码

    dom对象控制显示文章字体大小的js代码 <head> <script type="text/javascript"> function check(siz ...

  6. vue中利用scss实现整体换肤和字体大小设置

    一.前言 利用Sass预处理实现换肤和字体大小调整. 思路及达到的效果:字体大小的适配使用window.devicePixelRatio的值和需要调整的差量进行控制.页面初始化是的字体适配可以根据de ...

  7. Eclipse字体大小设置

    打开Eclipse,在主界面下Window->Preferences->General->Appearance->Colors and Fonts, 然后在右边展开框Basic ...

  8. CSS字体大小设置时的参考(转)

    from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...

  9. css字体大小设置em与rem的区别

    em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如  如果我在box_text的父元素box加了一个字体大小   那么body的8px就会被box_text的父元 ...

随机推荐

  1. c#多线程介绍(上)

    转载原文:这里是链接内容 转载原文:这里写链接内容 转载原文:这里写链接内容 (重要事情说三遍) 引言 本文主要从线程的基础用法,CLR线程池当中工作者线程与I/O线程的开发,并行操作PLINQ等多个 ...

  2. Entity Framework扩展库

    这个Entity Framework扩展完全支持EF 5.0/6.0,项目地址 https://github.com/loresoft/EntityFramework.Extended,这个库支持批量 ...

  3. 【腾讯Bugly干货分享】美团大众点评 Hybrid 化建设

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/rNGD6SotKoO8frmxIU8-xw 本期 T ...

  4. Guava Supplier实例

    今天想讲一下Guava Suppliers的几点用法.Guava Suppliers的主要功能是创建包裹的单例对象,通过get方法可以获取对象的值.每次获取的对象都为同一个对象,但你和单例模式有所区别 ...

  5. 企业IT管理员IE11升级指南【2】—— Internet Explorer 11 对Adobe Flash的支持

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  6. [变]C#谜题(1-10)表达式篇

    [变]C#谜题(1-10)表达式篇 最近偶然发现了<Java谜题>,很有意思,于是转到C#上研究一下. 本篇是关于表达式的一些内容. 谜题1:奇数性(负数的取模运算) 下面的方法意图确定它 ...

  7. ArcGIS之Cartogram地图变形记

    一.地图会说谎 地图作为真实世界的抽象,是“用图说话”最可靠的工具,但是有的时候地图也会撒一些小小的谎言,其中最著名的例子当属美国总统大选.如图1是2012年美国总统大选后网上给出的一个结果图,红色代 ...

  8. [公告]Senparc.Weixin v4.7.0 升级说明(2016-08-08)

    本次升级包含了除QY以外所有的类库,升级内容包括: 1.重构Conatainer结构,删除 ItemCollection 属性,直接使用ContainerBag加入到缓存: 2.重构IContaine ...

  9. Python第一天 - 函数

    ---恢复内容开始--- (一)定义一个函数 def 函数名(参数): 函数体 return 返回值 例: def mySum(x , y): return int(x)+int(y)print(my ...

  10. 前端学PHP之面向对象系列第一篇——类和对象

    × 目录 [1]类 [2]成员属性[3]成员方法[4]对象[5]成员访问[6]this 前面的话 面向对象程序设计(OOP)是一种计算机编程架构.计算机程序由单个能够起到子程序作用的单元或对象组成,为 ...