给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="http://eps.gs/go.php?url=javascript:SetFont(18)">大</a>
<a href="http://eps.gs/go.php?url=javascript:SetFont(16)">中</a>
<a href="http://eps.gs/go.php?url=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文章页面字体添加大中小功能
除非注明,文章均为 《博客之家》 原创
转载请注明本文短网址:https://bk.likinming.com/post-800.html  [生成短网址]

日期:2016年03月28日 星期一   分类:好文分享   浏览(12941)   评论(3)
本文已经被百度收录,点击查看详情
声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。免费发布信息

留言/评论:◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

自动获取QQ

昵称

邮箱

网址

2楼、电脑维修公司 [回复该留言]
2016-11-27 20:55
教我怎么操作!谢谢!
1楼、网际电脑 [回复该留言]
2016-03-28 08:38
你没放上去;看下效果
李明 [回复该留言]
2016-03-28 08:41
@网际电脑:有图有真相,看图吧!哈哈!

网站收录提交

  • 名称:
  • 网址:

网址统计

  • 收录网址:961 个
  • 发布文章:2520 条
  • 本站运行:5年6月26天
Copyright © 2012 - 2018 by 李明关于本站免责声明本站下载站点地图sitemap广告联系
1855