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


Posted in Javascript onJanuary 02, 2014

在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以CSS页面中定义,一般网页的标准字体是9pt,也就是12px;

实例代码一:

<!DOCTYPE html> 
<html> 
<head> 
<title>修改字体大小.html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css"> 
div{ 
border:1px red solid; 
width:455px; 
font-size:16px; 
} 
.max{ 
font-size:20px; 
} 
.moren{ 
font-size:16px; 
} 
.min{ 
font-size:12px; 
} 
</style> 
<script type="text/javascript"> 
//此种方式降低了js和CSS的耦合性 
function changeFontSize(fontStyle){ 
// 获取节点对象 
var divNode = document.getElementsByTagName("div")[0]; 
// 设置该节点的Name属性以及属性值 
divNode.className=fontSize; 
} 
/* 
function changeFontSize2(fontSize){ 
// 获取节点对象 
var divNode = document.getElementsByTagName("div")[0]; 
divNode.style.fontSize=fontSize; 
} 
*/ 
</script> 
</head> 

<body> 
<a href="javascript:void(0)" onclick="changeFontSize2('20px')" class="max">大号</a> 
<a href="javascript:void(0)" onclick="changeFontSize2('16px')" class="moren">中号</a> 
<a href="javascript:void(0)" onclick="changeFontSize2('12px')" class="min">小号</a> 
<div> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
这里呢就是显示的文字,通过点击上面的超链接改变此字体大小<br/> 
</div> 
</body> 
</html>

实例方法二:

<html>
<head>
<title>JavaScript设置网页字体</title>
<style>
body{
font-size:9pt;
}
</style>
</head>
<body>
<div id=zoom>这是一段示例文字,你可以点击下边选择不同字号的字体,这段文字会随即改变大小。三水点靠木。</div>
<SCRIPT language=JavaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'pt'
}
</SCRIPT>
<P align=right>选择字号:[ <A 
 href="javascript:doZoom(13)">13pt(超大)</A> <A 
 href="javascript:doZoom(10.5)">10.5pt(中型)</A> <A 
 href="javascript:doZoom(9)">9pt(标准)</A> ]
</body>
</html>
Javascript 相关文章推荐
jquery png 透明解决方案(推荐)
Aug 21 Javascript
javascript 数组排序函数sort和reverse使用介绍
Nov 21 Javascript
20个实用的JavaScript技巧分享
Nov 28 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
JS实现按比例缩小图片宽高
Aug 24 Javascript
js创建元素(节点)示例
Jan 02 #Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 #Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 #Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 #Javascript
JS脚本defer的作用示例介绍
Jan 02 #Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 #Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP has encountered an Access Violation
2007/01/15 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
twig里使用js变量的方法
2016/02/05 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
php curl发送请求实例方法
2019/08/01 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
Javascript数组中push方法用法分析
2016/10/31 Javascript
js实现自定义路由
2017/02/04 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
使用Python构建Hopfield网络的教程
2015/04/14 Python
python编写弹球游戏的实现代码
2018/03/12 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python烟花效果的代码实例
2020/02/25 Python
如何使用python切换hosts文件
2020/04/29 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
魅力教师事迹材料
2014/01/10 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
HttpClient实现文件上传功能
2022/08/14 Java/Android