JavaScript控制网站文章字体大小显示简单实例——大中小切换

我们经常可以看到有些网站上的文章前,会有如大中小按钮字样的链接,点击可以改变整篇文章的字体大小,以方便不同人群阅读文章,这次我来简单介绍一个实例。 代码原理很简单,就是预先定义的ID来利用javascript来改变元素内的字体CSS属性,没什么难度,我就直接放代码(想加样式按钮什么的就css按自己喜欢的加)。 1、js部分:
<script type="text/javascript">
    Function SetFont(ID,size){
        var divBody = document.getElementById("ID");
        if(!divBody){
            Return;
        }
  divBody.style.fontSize = size+"px";
  Var divChildBody = divBody.childNodes;
  For (var i = 0; i<divChildBody.length;i++){
      If(divChildBody[i].nodeType==1){
         divChildBody[i].style.fontSize=size+"px";
      }
  }
}
</script>
2、HTML部分:
<a  href="javascript:SetFont(ID,20)" style="cursor: pointer; color: red;">大(20)</a> |
<a  href="javascript:SetFont(ID,16)" style="cursor: pointer; color: red;">中(16)</a> |
<a  href="javascript:SetFont(ID,12)" style="cursor: pointer; color: red;">小(12)</a> 
把你想控制的那部分的ID填上去就好了。 出来的效果就是本页面,我的头像上面的(如图): QQ图片20150621124746

LEAVE A REPLY
loading
正在赶回来……