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 相关文章推荐
JavaScript中的eval()函数详解
Aug 22 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
PHP中$GLOBALS与global的区别详解
2019/03/21 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
vue中如何使用ztree
2018/02/06 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python网页请求urllib2模块简单封装代码
2014/02/07 Python
pycharm 使用心得(四)显示行号
2014/06/05 Python
Python Socket编程入门教程
2014/07/11 Python
python实现删除文件与目录的方法
2014/11/10 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
西式婚礼主持词
2014/03/13 职场文书
公司门卫岗位职责
2014/03/15 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
单位员工收入证明样本
2014/10/09 职场文书
保密工作整改报告
2014/11/06 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
小学中队活动总结
2015/05/11 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书