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来生成随机彩票号码清单
用js来生成随机彩票号码清单...
2007-02-02
实现抖音两个旋转小球的loading技巧实例
这篇文章主要为大家介绍了实现抖音两个旋转小球的loading技巧实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
微信小程序时间控件picker view使用详解
这篇文章主要介绍了微信小程序时间控件picker view的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
JS将秒换成时分秒实现代码
将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助
2013-09-09
js省市县三级联动效果实例
这篇文章主要介绍了js实现简单的省市县三级联动效果,以完整实例形式分析了JavaScript实现省市县三级联动效果的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-05-05
模仿JQuery.extend函数扩展自己对象的js代码
最近打算写个自己的js工具集合，把自己平常经常使用的方法很好的封装起来，其中模仿了jq的结构。
2009-12-12
微信小程序实现下拉刷新和上拉分页效果的方法详解
这篇文章主要为大家详细介绍了微信小程序动画是如何实现下拉刷新和上拉分页效果的，文中示例代码讲解详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
js 判断文件类型并控制表单提交示例代码
判断文件类型控制表单提交这些都是在客户端实现的，下面有个不错的示例，感兴趣的朋友可以参考下
2013-11-11
实现在 Chrome 中执行 JavaScript 代码
这篇文章主要介绍了实现在 Chrome 中执行 JavaScript 代码，下面来介绍如何在 Chrome 中打开开发者工具，以及如何在开发者工具中运行调试 JavaScript 代码，具有一的的参考价值,需要的朋友可以参考一下
2022-03-03
让JavaScript和其它资源并发下载的方法
这篇文章主要介绍了让JavaScript和其它资源并发下载的方法,JavaScript并发下载主要目的在于解决JS加载会阻碍页面呈现的问题,需要的朋友可以参考下
2014-10-10