js实现动态改变字体大小代码
2023-06-13 09:15:15 时间
在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以CSS页面中定义,一般网页的标准字体是9pt,也就是12px;
实例代码一:
<!DOCTYPEhtml> <html> <head> <title>修改字体大小.html</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <!--<linkrel="stylesheet"type="text/css"href="./styles.css">--> <styletype="text/css"> div{ border:1pxredsolid; width:455px; font-size:16px; } .max{ font-size:20px; } .moren{ font-size:16px; } .min{ font-size:12px; } </style> <scripttype="text/javascript"> //此种方式降低了js和CSS的耦合性 functionchangeFontSize(fontStyle){ //获取节点对象 vardivNode=document.getElementsByTagName("div")[0]; //设置该节点的Name属性以及属性值 divNode.className=fontSize; } /* functionchangeFontSize2(fontSize){ //获取节点对象 vardivNode=document.getElementsByTagName("div")[0]; divNode.style.fontSize=fontSize; } */ </script> </head> <body> <ahref="javascript:void(0)"onclick="changeFontSize2("20px")"class="max">大号</a> <ahref="javascript:void(0)"onclick="changeFontSize2("16px")"class="moren">中号</a> <ahref="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> <divid=zoom>这是一段示例文字,你可以点击下边选择不同字号的字体,这段文字会随即改变大小。脚本之家。</div> <SCRIPTlanguage=JavaScript> functiondoZoom(size){ document.getElementById("zoom").style.fontSize=size+"pt" } </SCRIPT> <Palign=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>
相关文章
- QQ客服 右侧悬浮JS实现代码详解编程语言
- Raphaël 鼠标拖动,滚轮缩放js代码详解编程语言
- 符合web标准的连续滚动图像的js代码
- 在Z-Blog中运行代码[html][/html](纯JS版)
- js最简单的拖拽效果实现代码
- js限制文本框为整数和货币的函数代码
- JS实现完美include加载功能代码
- Js+CSS实现的间断和不间断文本滚动代码
- js第二代身份证号码的验证机制代码
- JS中encodeURIComponent函数用php解码的代码
- Js获取asp页面返回的值(加载值)实现代码
- 通过JS自动隐藏手机浏览器的地址栏实现原理与代码
- 根据经纬度计算地球上两点之间的距离js实现代码
- js实现一个省市区三级联动选择框代码分享
- 很好用的js日历算法详细代码
- 简易js代码实现计算器操作
- js仿百度有啊通栏展示效果实现代码
- JS定义回车事件(实现代码)
- js实现inputtype="file"文件上传示例代码
- 获取数组中最大最小值方法js代码(自写)
- js格式化货币数据实现代码
- JS操作数据库的实例代码
- js实现幻灯片播放图片示例代码
- 判定是否原生方法的JS代码
- js动态删除div元素基本思路及实现代码
- js图片处理示例代码
- js采用delete实现继承示例代码
- 改变状态栏文字的js代码
- 实现js保留小数点后N位的代码
- 不到30行JS代码实现Excel表格的方法
- 输入框过滤非数字的js代码