div
里的的代码style="height:150px; border:0px; overflow:hidden;"
有把 Blogger 帖子内容限制到指定高度的目的。这样就可以保证主页上超长的帖子不回让页面拉得太长,破坏页面美观性。
但是这样,读者要阅读全部内容只能通过点击帖子标题进入完整页面查看,比较麻烦。
在我之后提供的 javascript 代码里,可以通过点击 [+] 和 [-] 号来控制显示范围,每点击一次,帖子内容就会拉开/收回一部分。但是这样也有限制,过多的展开操作会让页面出现大片空白。而这方面的限制也很无力……只能限制最大展开到某个高度,之后会提示访问者,“展开到头儿了,您看完整帖子吧。”其实帖子可能仍旧没有完整显示。
function r<$BlogItemNumber$>(value) {
var obj = document.getElementById("t<$BlogItemNumber$>");
var newheight = parseInt(obj.offsetHeight,10) + (value);
if(newheight >=0 && newheight <= 600) { obj.style.height = newheight + 'px'; } else { alert('抱歉,达到了收放极限。'); } }
可见,其中的限制是最达到 600px。
今天我重新看了一下 w3.org 上的说明 [1] [2],发现可以用 offsetHeight 或者 scrollHeight 来解决。
scrollHeight 就表示了 div 元素的总可见高度,即使通过以上的
overflow:hidden;
操作,它的真实高度仍可通过 scrollHeight 得到。这样,就可以通过把限制改为if(newheight >=0 && newheight <= document.getElementById("t<$BlogItemNumber$>").scrollHeight) {
obj.style.height = newheight + 'px';
}
else {
alert('抱歉,达到了收放极限。');
}
来解决问题。当展开到(或超过)全文应有的高度值时,提示已经展开到最大值。
警惕啊……不要忘记数值之后的
px
,否则 Firefox 不会识别这个值的。Update @ 1-13 1:48:
D2o 说,如果按照文中所述方法,最终会有半行文字无法正常显示,所以推荐使用这样的方法:
if(newheight >=0 && newheight <= document.getElementById("t<$BlogItemNumber$>").scrollHeight+VALUE) {
obj.style.height = newheight + 'px';
}
else {
alert('抱歉,达到了收放极限。');
}
而那个 VALUE 取值也是有讲究的:
+值须>=27且<=49 <27的结果是一丁点儿效果都没有>49的结果是可以无限展开
神奇吧?
更神奇的是,>=27且<=49会多展开一些,但是多出来的高度是一样的!
......
所以,请各位按照这个方式设置……
恩
回复删除不错,我试试
不行啊。。。
回复删除总是少半行左右。。。
那就试着再加上20px左右。
回复删除document.getElementById("t<$BlogItemNumber$>").scrollHeight+20
+20不行
回复删除经我在Firefox/2.0.0.11里面反复多次的测试,结果如下:
+值须>=27且<=49
<27的结果是一丁点儿效果都没有
>49的结果是可以无限展开
神奇吧?
更神奇的是,>=27且<=49会多展开一些,但是多出来的高度是一样的!
......
(完)
你的blog可是越来越精彩哦!! 呵呵~
回复删除喔,黑咪哥来了!谢谢夸奖:)
回复删除