给Emlog文章页面字体添加大中小功能

摘要

看到别的网站这个功能

看到别的网站这个功能,就在网上找了一些教程实现一下.首先在</head>前添加下面的js代码

//设置字体大小<script type="text/javascript">function SetFont(size){ var divBody = document.getElementById("article_content"); 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>

注意代码中的“article_content”是指文章内容所在的ID,比如:
<div id="article_content">文章内容</div>

请根据你自己主题的实际修改。

给Emlog文章页面字体添加大中小功能

2.在文章页面模板要显示设置的地方(比如em主题的echo_log.php文件),添加下面的代码

<span class="article-font-size"><a href="javascript:SetFont(18)">大</a><a href="javascript:SetFont(16)">中</a><a href="javascript:SetFont(14)">小</a></span>

SetFont( )中的数字就是字体的大小,请根据自己需要修改。

在CSS里面加入
.article-font-size{position:absolute;right:0;}.article-font-size a{border:1px solid #ccc;padding:0.1em 0.2em;color:#bbb;}

到这里,功能已经实现,剩下的就是通过css来设置 大中小 这三个字的显示方式了。

因为我的阅读页文件没有ID  所以我增加了一个

给Emlog文章页面字体添加大中小功能

文章作者:兜说博客,欢迎大家投稿: http://likinming.com/post-87.html

版权所有:《李明博客
文章标题:《给Emlog文章页面字体添加大中小功能
除非注明,文章均为 《李明博客》 原创
转载请注明本文短网址:http://likinming.com/post-800.html  [生成短网址]

发表评论

注意:本博客开启缓存,你的评论一般2小时后才能看到,如是广告,评论将无法显示!

目前评论:3 条

  1. avatar 电脑维修公司
    回复 2016-11-27 20:55  沙发

    教我怎么操作!谢谢!

  2. avatar 网际电脑
    回复 2016-03-28 08:38  板凳

    你没放上去;看下效果

    • avatar 李明

      @网际电脑:有图有真相,看图吧!哈哈!