JavaScript 控制字体大小设置的方法


Posted in Javascript onNovember 23, 2016

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

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 控制字体大小设置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js判断浏览器类型的方法
Aug 07 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
AngularJS1.X学习笔记2-数据绑定详解
Apr 01 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 #Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 #Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 #Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 #Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 #Javascript
domReady的实现案例
Nov 23 #Javascript
BootStrap按钮标签及基本样式
Nov 23 #Javascript
You might like
德生PL330的评价与改造
2021/03/02 无线电
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
linux下php上传文件注意事项
2016/06/11 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
微信小程序url与token设置详解
2017/09/26 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Django视图类型总结
2021/02/17 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
2014迎接教师节演讲稿
2014/09/10 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
活动费用申请报告
2015/05/15 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL