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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
Vue动态获取width的方法
Aug 22 Javascript
js实现开关灯效果
Mar 30 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
layer弹出层全屏及关闭方法
2018/08/17 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python实现视频下载功能
2017/03/14 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
大学社团计划书
2014/05/01 职场文书
员工保密承诺书
2014/05/28 职场文书
会计学习心得体会
2014/09/09 职场文书
会议接待欢迎标语
2014/10/08 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript