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

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

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

时间: 2016-11-21

js实现动态改变字体大小代码

在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以CSS页面中定义,一般网页的标准字体是9pt,也就是12px: 实例代码一: <!DOCTYPE html> <html> <head> <title>修改字体大小.html</title> <meta http-equiv="keywords"

通过JavaScript控制字体大小的代码

为了此代码到您的网页必须使用像素大小的字体(PX),而不是相对大小的字体,使用"EM"或"%".当然如果你使用其他字体单位的代码可以很容易地适应这些.如果脚本不能找到一个段落的字体大小,它会默认为12px.核心代码: 复制代码 代码如下: var min=8;var max=18;function increaseFontSize() {   var p = document.getElementsByTagName('p');   for(i=0;i<p.l

jQuery之字体大小的设置方法

先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end   可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组

jQuery实现字体颜色渐变效果的方法

本文实例讲述了jQuery实现字体颜色渐变效果的方法.分享给大家供大家参考,具体如下: jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行, 因此如果想实现颜色渐变的效果需要animate()外的其他方法,示例如下 方法1: <!DOCTYPE html> <html lang="en"> <head> <

Android Dialog 设置字体大小的具体方法

先看下面图片: 这是我在做登录页面的时候,调用系统的ProgressDialog 进行等待,可是看起来很不协调,左边的等待图片过大,右边文字过小,看起来老别扭,虽然功能上不存在什么问题,但是我有强迫症,看不顺的就像弄掉.可是找了好久,没发现 ProgressDialog  有一个方法是可以设置字体的. 于是我又来CSDN查找解决方案,可是找了好久,翻了好几页都没看到想要的结果,心冷了,找到的都说ProgressDialog 可以自定义一个View,在layout定义一个布局,然后设置到Progr

Pycharm 字体大小调整设置的方法实现

一.pycharm字体放大的设置 File ->setting -> Keymap ->在搜寻框中输入increase ->Increase Font Size(双击) -> 在弹出的对话框中选择Add Mouse Shortcut 在弹出的对话框中同时按住ctrl键和鼠标滚轮向上滑. 二.Pycharm字体缩小的设置 File ->setting ->Keymap ->在搜寻框中输入decrease ->Decrease Font Size(双击)-

Flutter 透明状态栏及字体颜色的设置方法

注:底色透明是否生效与android版本有关,版本过低设置无效 1.在main.dart内设置 void main(){ runApp(new MyApp()); if (Platform.isAndroid) { //设置Android头部的导航栏透明 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, //全局设置透明 statusBarIc

基于jquery的文章中所有图片width大小批量设置方法

前面要加载一个jquery库. <script type="text/javascript"> var setNewsImg = function(obj){ $(obj).find('img').each(function(i){ var imgw = $(this).width(); var imgh = $(this).height(); var scale=1; if(imgw>634){ scale = 634/imgw; console.log(scale

IIS 7 中设置文件上传大小限制设置方法

在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: 复制代码 代码如下: <system.web><httpRuntime maxRequestLength="1048576" executionTimeout="600"/>        </system.web> 但在IIS7中,设置如上设置后,不管设置多大数值,最大上传了限制为30M 还要进行如下设置才能正确: 方法1: appcmd set config &qu

iOS开发技巧之状态栏字体颜色的设置方法

状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View controller-based status bar appearance设为NO 状态栏字体的颜色只由下面的属性设定,默认为白色: // default is UIStatusBarStyleDefault [UIApplication sharedApplication].statusBarStyle 解

python IDLE 背景以及字体大小的修改方法

为了保护眼睛,决定把白色背景换掉: 1 首先,在已经下载好的python文件目录下,找到config-highlight.def文件,我的是在H:\python\python3**\Lib\idlelib**文件夹下. 2.打开文件后,你会看到一些默认的颜色配置,比如经典的颜色配置就是白色背景,一般这个文件中会有两种配置可供选择: [IDLE Classic]和 [IDLE New],表现在IDLE界面上就是在python shell下,选择options-configure IDLE--hig

做网页字体大小参考 网页中同字号字体的不同单位对比列表

对于WEB前端页面开发,字体大小的设置是比较重要,这里找到了一些关于字号大小的数据,共享出来备以后参考,也希望能对大家有用! Points   Pixels       Ems            Percent 6pt        8px          0.5em        50% 7pt        9px          0.55em      55% 7.5pt     10px        0.625em    62.5% 8pt        11px