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

     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 = (a / b, a%b) 运算输出顺序

    #include<iostream> int main() { using namespace std; int a, b, c; a = ; b = ; c = ; printf(&qu ...

  2. nmea协议

    NMEA协议 信息类型为: GPGSV:可见卫星信息 GPGLL:地理定位信息 GPRMC:推荐最小定位信息 GPVTG:地面速度信息 GPGGA:GPS定位信息 GPGSA:当前卫星信息 1. Gl ...

  3. ABP理论学习之领域服务

    返回总目录 本篇目录 介绍 IDomainService接口和DomainService类 样例 创建一个接口 服务实现 调用应用服务 一些讨论 何不只使用应用服务 如何强制使用领域服务 介绍 领域服 ...

  4. [翻译]理解Swift中的Optional

    原文出处:Understanding Optionals in Swift 苹果新的Swift编程语言带来了一些新的技巧,能使软件开发比以往更方便.更安全.然而,一个很有力的特性Optional,在你 ...

  5. 编写具有单一职责(SRP)的类

    这两周我需要对一个历史遗留的功能做一些扩展,正如很多人不愿意碰这些历史遗留的代码一样,我的内心也同样对这样的任务充满反抗.这些代码中充斥着各种null判断(你写的return null正确吗?),不规 ...

  6. Entity Framework Code First数据库连接

    1. 安装Entity Framework 使用NuGet安装Entity Framework程序包:工具->库程序包管理器->程序包管理器控制台,执行以下语句: PM> Insta ...

  7. TDR分辨率

    在日常的生活工作中,有很多测试测量的工具,比如测量长度的尺子,计量时间的钟表等等,谈到测试测量工具的时候,分辨率是关键指标之一,比如尺子的 分辨率是1mm,时钟的分辨率是秒.所谓分辨率就是测试测量工具 ...

  8. Android-找到包下面所有的类

    Android 利用反射找到包下面所有的类 Android下其实有一个DexFile的东西,利用它我们可以很好的找到包下面所有的类 什么是DexFile? 官方的说明是这样的: Manipulates ...

  9. Java学习笔记(06)

    继承 super关键字 重写 final关键字 抽象类/abstract关键字 接口 一.继承 继承是类与类之间的继承,是一种is a 的关系(继承的满足条件) 继承的类叫子类 / 派生类,被继承的叫 ...

  10. datagrid可编辑表格

    使用datagrid对商品数量和单价进行修改 $(function() { var $dg = $("#zhong"); $dg.datagrid({ url : "ge ...