2015-06-06 23:31
JavaScript控制网站文章字体大小显示简单实例——大中小切换
我们经常可以看到有些网站上的文章前,会有如大中小按钮字样的链接,点击可以改变整篇文章的字体大小,以方便不同人群阅读文章,阿萌来简单介绍一个实例。
代码原理很简单,就是预先定义的ID来利用javascript来改变元素内的字体CSS属性。
就这么简单的实例,没什么难度,我也就不多说了,下面放代码:
<script type="text/javascript"> function setFontSize(objID,size){ document.getElementById(objID).style.fontSize=size+'px'; } </script> <a onclick="setFontSize('content',20)" style="cursor:pointer;color:red;">大(20)</a> | <a onclick="setFontSize('content',16)" style="cursor:pointer;color:red;">中(16)</a> | <a onclick="setFontSize('content',12)" style="cursor:pointer;color:red;">小(12)</a> <div id="content"> <p>阿萌的程序小屋是一个清新的、爱卖萌的、专注于各种技术研究探讨的个人博客,本站涉及领域主要在程序编程、心理学以及动漫的相关推荐,在这里希望大家能与我轻松愉快的进行讨论与学习,世界因讨论而变动,值得一提的是博主是个重度萌物控患者....</p> </div>