用原生js统计文本行数的简单示例
前言
在开发的时候会遇到这种情况，只显示两行，如果超过两行，则显示一个“显示更多”的按钮，点击按钮来显示剩余行的内容。有个jQuery的插件loadingDots专门实现了这个功能。不过今天这里我们要用原生的Javascript来实现，要实现这个需求，最关键的是要确定这个容器内文本的行数，得到行数后，修改元素高度，并确定是否显示加载按钮。
window.getComputedStyle()
要使用原生JavaScript代码获取一个元素的各个style属性，使用window.getComputedStyle()是必然的。它可以返回一个HTML元素在浏览器中真正显示时的各个样式——当然，有些样式会被浏览器给屏蔽，比如，你要获取一个链接的颜色，并准备通过颜色来判断用户是否访问过某个地址，那肯定是不行的。
该方法返回的，是一个样式键值对，是CSSStyleDeclaration的实例。各属性索引名没有-，且采用驼峰命名法。比如lineHeight。
行数=整体高度/行高
整体高度通过height可以获取。行高可以通过lineHeight获取，将其结果再取整即可得到行数。
但有个问题，如果没有针对一个元素设置line-height值，则其默认值为normal，这个值在桌面浏览器中通常是1.2，但还与字体有关。因此，最好是对需要计算行数的元素设置一下line-height值。
一个简单的实现如下：
functioncountLines(ele){
varstyles=window.getComputedStyle(ele,null);
varlh=parseInt(styles.lineHeight,10);
varh=parseInt(styles.height,10);
varlc=Math.round(h/lh);
console.log('linecount:',lc,'line-height:',lh,'height:',h);
returnlc;
}
完整代码示例
<!DOCTYPEhtml>
<html>
<head>
<title>LineCount</title>
<styletype="text/css">
p{
line-height:1.3em;
}
</style>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head>
<body>
<pid="target">Shejustmadehavingababylooklovely.Everythingiswhiteandshealwayshasafreshblueberrypiethat'ssteamingandsconesandclottedcreamandshe'sreadingTheOldManandtheSeaandherlittleboyisrollywithbonnets.It'samazing,andIthoughtthisislovely.Mykidislikeplayingwithlikeexplosivedevices.Idon'tknowwhereshe'sfoundthem,likestickingtheminourdog'sear.Shealreadyknowshowtodrywallcausesheputsholesinthewall.<br/>
“今天的中国人一如当年的德国人，沉迷于‘崛起'幻觉，习惯于听信他人的吹捧，还想当然地认为只要中国继续保持经济增长，不仅未来的经济总量超越‘世界老大'美国可以期待，中国实现全面复兴也将是囊中之物。”上海外国语大学国际关系与公共事务学院教授程亚文在其新著《大国战略力》中尖锐地指出中国现下有不少人陷入了“盛世”幻觉，并没有意识到在经济总量的背后，中国其实还是一个极为落后的国家。世界上还没有一个大国是在风平浪静中兴起的，中国的新一轮文明复兴也将充满风险和曲折。防止国家崩溃、解体或衰败应该成为中国国家战略的重中之重。染上“软乎乎的幸福主义”只会让一个国家变得脆弱。
</p>
<p>行数：<spanid="shower"></span></p>
改变窗口大小，自动计算
<buttononclick="countLines()">立刻计算</button>
<scripttype="text/javascript">
vartarget=document.getElementById('target');
varshower=document.getElementById('shower');
functioncountLines(ele){
varstyles=window.getComputedStyle(ele,null);
varlh=parseInt(styles.lineHeight,10);
varh=parseInt(styles.height,10);
varlc=Math.round(h/lh);
console.log('linecount:',lc,'line-height:',lh,'height:',h);
returnlc;
}
functionchange(){
shower.innerHTML=countLines(target);
}
window.onresize=change;
change();
</script>
</body>
</html>
[/html]
总结
以上就是本文的全部内容，希望本文的内容对大家使用Javascript能有所帮助。如果有疑问可以留言讨论。