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

原创更新时间：2009年06月26日 13:15:51 原创作者：

给网页正文提供，小中大三种字体的切换功能。用js代码设置div style的fontSize属性。

第一种方法：分为大中小控制正文字体大小，一般需要指定 id

第二种方法，用的不多，有特殊需要的可以用。这个是设置body中所有的大小设置，不如上面的代码就控制正文的字体大小。大家可以根据自己的需要选用。注意多测试。

第三种方法：只有增加减小两种方法，不过很实用，本站也是用的这种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <htmL> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <style> #content {font-size:12px; line-height:200%; padding:10px; } </style> <script language="javascript"> //更改字体大小 var status0=''; var curfontsize=10; var curlineheight=18; function turnsmall(){ if(curfontsize>10){ document.getElementById('art_content').style.fontSize=(--curfontsize)+'pt';     document.getElementById('art_content').style.lineHeight=(--curlineheight)+'pt'; } } function turnbig(){ if(curfontsize<28){ document.getElementById('art_content').style.fontSize=(++curfontsize)+'pt';     document.getElementById('art_content').style.lineHeight=(++curlineheight)+'pt'; } } </script> <body> 字体：[<a href="javascript:turnbig()">增加</a> <a href="javascript:turnsmall()">减小</a>] <div id="art_content"> 脚本之家 测试文本代码 </div> </body> </htmL>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS在if中的强制类型转换方式
大家都知道JS在很多情况下会进行强制类型转换，最常见的方式有两种，在文章均给大家提到，下面小编给大家带来了JS在if中的强制类型转换，感兴趣的朋友一起看看吧
2018-07-07
基于javascript如何传递特殊字符
在 JavaScript 中使用反斜杠来向文本字符串添加特殊字符，下面通过本篇文章给大家介绍javascript如何传递特殊字符，对js传递特殊字符相关内容感兴趣的朋友一起学习吧
2015-11-11
跨浏览器的事件对象介绍
虽然IE的事件对象与DOM的事件对象存在差异，但是IE事件对象中所包含的信息和能力，与DOM事件对象是相同的，只是表现形式不同而已，通过映射的方式，我们可以实现兼容IE和DOM事件对象的事件对象
2012-06-06
JS sort排序详细使用方法示例解析
这篇文章主要介绍了JS sort排序详细使用方法示例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
uniapp自定义弹框的方法
这篇文章主要为大家详细介绍了uniapp自定义弹框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
javascript动态创建对象的属性详解
在本篇文章中我们给大家分享了关于javascript动态创建对象的属性的相关知识点以及代码分享，需要的朋友们参考学习下。
2018-11-11
js+html制作简单日历的方法
这篇文章主要为大家详细介绍了js html制作简单日历的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
基于JS实现checkbox全选功能实例代码
最近做了个项目其中有这样的需求要求实现点击全选选中所有菜单，再次点击全选取消选中。下面小编给大家分享实现代码，对js实现checkbox全选功能感兴趣的朋友参考下吧
2016-10-10
让浏览器DOM元素最后加载的js方法
让浏览器DOM元素最后加载的方法有很多，本例为大家介绍下，通过js如何实现
2014-07-07
BootStrap 表单控件之单选按钮水平排列
这篇文章主要介绍了BootStrap 表单控件之单选按钮水平排列的实现代码，需要的朋友可以参考下
2017-05-05