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

为了此代码到您的网页必须使用像素大小的字体（PX），而不是相对大小的字体，使用“EM”或“％”。当然如果你使用其他字体单位的代码可以很容易地适应这些。如果脚本不能找到一个段落的字体大小，它会默认为12px。
核心代码:


代码如下:

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }
}

包括上面的代码在您的网页（无论是放置在头部分，或将其放置在一个外部JS文件和进口）。然后可以调用的增加和减少象下面的字体大小的功能。
使用方法：


代码如下:

<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>

赞 (0)

相关推荐

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

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ var oTarget = document.getElementById(id), content = document.getElementById(content), size = params.size || 14, maxSize = params.maxSize || 20, step =

  • jQuery之字体大小的设置方法

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

  • 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

  • 用Pycharm实现鼠标滚轮控制字体大小的方法

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

  • javascript 改变字体大小方法集合 原创

    第一种方法: 分为 大 中 小 控制正文字体大小,一般需要指定 id #content {font-size:12px; line-height:200%; padding:10px; } function setfont(size) { var obj; obj=document.getElementById("content"); obj.style.fontSize=size; //obj.style.color="#ff0000"; } 字体: 小中大 我们

  • JavaScript 比较时间大小的代码

    例如: Date.parse( "2000-01-01" ) IE and Mozilla浏览器: "NaN".那么我们一般在Web页面上显示的时 间 就不能直接转换.需要做处理. 可以直接转换的格式"01/01/2000","2000/01/01" 复制代码 代码如下: //定义正则表达式,因为jS对只能替换一个 //转换为 "2000/01/01" var regS = new RegExp("

  • javascript 大中小字体显示实现代码

    大中小字体显示 大 中 小 京藏高速通畅四天后再次堵车上百公里 昨日上午8点,央视记者沿鄂尔多斯历时3个多小时,仅行进120多公里, 到达河北东洋河收费站.此时,收费站双向放行,交通拥堵有所缓解. 据了解,截至昨日中午12点,内蒙古境内拥堵情况最长达120公里. 据测算,上万车辆滞留. 其主要原因一是大货车停车后,启动速度慢,二是不少大货车司机堵车期间睡着了. function changeFontSize(pucl,size) { if(pucl.style) pucl.style.fontS

  • 用javascript控制iframe滚动的代码

    现在有一个横向的IFRAME,需要通过点击iframe外的一个图片来横向滚动iframe内的一个html页,但又不想让看见iframe的滚动条,请问如何解决啊???? <img   src="demo.gif"   onmousedown="window.timer=setInterval('a.document.body.scrollTop++',10)"   onmouseup="clearInterval(window.timer)"

  • JavaScript比较同一天的时间大小实例代码

    在项目开发的过程中,有时候会遇到同一天内的时间大小比较,一般来说选择时间是通过插件实现的,但并不排除客户要求手动输入的情况. 那么,在应客户要求手动输入时间,并且需要进行时间大小比较的时候该如何实现呢?以下简单介绍我实现的方法步骤: 1.首先,获取用户输入的内容: 2.验证时间格式是否正确: 3.比较两个时间的大小(整理了三种比较时间的方法,详情请查看以下代码): 4.返回结果. 以下为示例代码,仅做参考: 1.获取用户输入的两个时间,并将用户输入的冒号全部替换为半角冒号,方便后续操作: var

  • js如何改变文章的字体大小

    js如何改变文章的字体大小

    最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小? 小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下 效果图: 点击大.小按钮,随时切换字体大小 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用js如果改变一篇文章字体的大小</ti

  • Android如何动态调整应用字体大小详解

    Android如何动态调整应用字体大小详解

    前言 为什么要动态设置字体大小?由于项目面对的是中老年客户项目中自带的字体无法满足客户需求. Android应用字体大小默认随系统设置的字体大小而变化,但您可能不希望您的应用字体大小随系统设置变化,想要自己控制,例如微信.本文简单介绍一下如何实现应用字体大小动态调整而不是依赖系统设置 字体大小变化是由android.content.res.Configuration.class类中的fontScale控制的,因此,若想我们的应用字体大小变化不随系统变化而是由我们自主控制,就需要我们修改fontS

随机推荐