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 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
简单的jQuery入门指引
Jul 28 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vue项目实现github在线预览功能
Jun 20 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
微信小程序接入腾讯云验证码的方法步骤
Jan 07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
浅谈javascript错误处理
2019/08/11 Javascript
Python合并多个Excel数据的方法
2018/07/16 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Django组件content-type使用方法详解
2019/07/19 Python
解决Python中回文数和质数的问题
2019/11/24 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python简单实现区域生长方式
2020/01/16 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
国际贸易专业推荐信
2013/11/15 职场文书
学生自我鉴定
2013/12/18 职场文书
党建示范点实施方案
2014/03/12 职场文书
员工趣味活动方案
2014/08/27 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
Django使用echarts进行可视化展示的实践
2021/06/10 Python
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技