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 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
JS之相等操作符详解
Sep 13 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
微信小程序实现购物车小功能
Dec 30 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
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
js+div+css下拉导航菜单完整代码分享
2016/12/28 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
layui table 参数设置方法
2018/08/14 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[45:16]完美世界DOTA2联赛循环赛 IO vs FTD BO2第二场 11.05
2020/11/06 DOTA
Python中的并发编程实例
2014/07/07 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
综合内勤岗位职责
2014/04/14 职场文书
宣传工作经验材料
2014/06/02 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
会计师事务所实习证明
2014/11/16 职场文书
先进党支部申报材料
2014/12/24 职场文书
安阳殷墟导游词
2015/02/10 职场文书
前台岗位职责
2015/02/13 职场文书
出国留学自荐信模板
2015/03/06 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP