阿萌的程序小屋

萌物控重度患者与您一起畅游技术与梦想的世界

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> 

 

测试浏览展示(看这里)大(20) | 中(16) | 小(12)

如有朋友感觉我的博文或代码有问题,愿能给予我宝贵的意见!Thanks

另注:转载请随意,但请带上本文地址,万分感谢。

https://www.wangmengyu.cn/?p=423

这就是真的真的是传说中的公告牌的说~~
暂且努力发展中~~

性别:男  年龄:20岁
现居:江苏  南京  浦口区
标语:萌即是一切