之前有说过 万戈 童鞋新主题上那个字体大小切换很想折腾下，昨天他博客正好来了个分解功能解析，于是拖他福 copy 到了我的博客上。
其实代码简单到不能再简单了，不过我还是弄了将近2个小时，为了能和主题相融合，CSS样式改了又改，终于看起来顺眼多了。
HTML 部分：
<ul id="resizer">
<li id="f_s"><a href="javascript:void(0)">-</a></li>
<li id="f_m"><a href="javascript:void(0)">N</a></li>
<li id="f_l"><a href="javascript:void(0)">+</a></li>
</ul>
<li id="f_s"><a href="javascript:void(0)">-</a></li>
<li id="f_m"><a href="javascript:void(0)">N</a></li>
<li id="f_l"><a href="javascript:void(0)">+</a></li>
</ul>
jQurey 部分：
$(document).ready(function() {
$('#resizer li').click(function() {
var fontSize = 14;
var name = $(this).attr('id');
if (name == 'f_s') {
fontSize -= 2
} else if (name == 'f_l') {
fontSize += 2
} else if (name == 'f_m') {
fontSize == 14
}
$('.post_content p').css('font-size', fontSize + 'px')
});
});
$('#resizer li').click(function() {
var fontSize = 14;
var name = $(this).attr('id');
if (name == 'f_s') {
fontSize -= 2
} else if (name == 'f_l') {
fontSize += 2
} else if (name == 'f_m') {
fontSize == 14
}
$('.post_content p').css('font-size', fontSize + 'px')
});
});
CSS 部分：
#resizer {PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FLOAT: left; PADDING-TOP: 0px;}
#resizer LI {DISPLAY: inline; FLOAT: left; COLOR: #b4b4b4; MARGIN-LEFT: 5px;}
#resizer LI A {BORDER-BOTTOM: #c8c8c8 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #c8c8c8 1px solid; WIDTH: 16px; DISPLAY: block; HEIGHT: 16px; BORDER-TOP: #c8c8c8 1px solid; BORDER-RIGHT: #c8c8c8 1px solid;}
#resizer LI A:hover {BACKGROUND: #ebebeb; text-decoration: none;}
#resizer LI {DISPLAY: inline; FLOAT: left; COLOR: #b4b4b4; MARGIN-LEFT: 5px;}
#resizer LI A {BORDER-BOTTOM: #c8c8c8 1px solid; TEXT-ALIGN: center; BORDER-LEFT: #c8c8c8 1px solid; WIDTH: 16px; DISPLAY: block; HEIGHT: 16px; BORDER-TOP: #c8c8c8 1px solid; BORDER-RIGHT: #c8c8c8 1px solid;}
#resizer LI A:hover {BACKGROUND: #ebebeb; text-decoration: none;}
我把 jQurey 直接写在 footer.php，然后把 HTML 和 jQurey 用
<?php if( is_single() ): ?><?php endif; ?>
括起来，简化非文章页面的代码。
另外，jQurey 部分我用的是px，而万戈用的是em，大家自己斟酌着用。
效果见文章标题下面，万戈 原版 传送。
» 转载请注明来源 » IM路人 » 折腾 jQuery 字体大小切换
路人你好 我想问一下如果只是单纯的把日志正文的字号调大应该修改CSS里的哪个参数呢 我用的也是philna2
@Japhia
我的主题已经被我改得乱七八糟了，可能已经与原主题有很大的出入了，我可以给你个思路：如果你只是想调整日志正文内容的字号的话，可能调整框住正文那片文字的 div 中属性的 css，也就是在这个属性的CSS样式中强制加上字号大小。比如 post_content 这个属性：
.post_content{font-size:你要的字号;}我咋弄完没有效果昵.出来按钮了 但是点击没反应.还想问下你的那个jQurey 部分 具体该加到什么地方?我还真找不到该往footer.php的什么地方加…..不用什么括号括起来了吧?
@SayMe
只要加在body之前就行了，等下我把 footer.php 发你看看就知道了。如果还有问题，那就是 jQurey 库加载问题了
@luren
原来jQurey 部分还用script括号 括起来 
多谢,成功了.还是看你的footer范例好