好库网 好库网首页 | 我的好库
好饱的专栏

Javascript统计DOM元素里文字的行数

发布者:好饱
发布日期:2012/5/31 20:06:26   更新日期:2012/5/31 20:06:26
阅读次数:2779
评分:4.80
介绍:计算文字行数的方法。
正文:

 

如果div的大小依赖于内容,那么可以先获取div的高度:

 

var divHeight = document.getElementById('content').offsetHeight;

然后除以字体行高:

 

document.getElementById('content').style.lineHeight;

或者直接得到行高:

 

var element = document.getElementById('content');
document.defaultView.getComputedStyle(element, null).getPropertyValue("lineHeight");

你还需要考虑到填充和任何行间距。

 

下面是代码:

<html>
<script>
function countLines() {
    var divHeight = document.getElementById('content').offsetHeight;
    var lineHeight = parseInt(document.getElementById('content').style.lineHeight);
    var lines = divHeight / lineHeight;
    alert("Lines: " + lines);
}
</script>
<body onload="countLines();">
<div id="content" style="width: 80px; line-height: 20px;">
hello how are you? hello how are you? hello how are you? hello how are you?
</div>
</body>
</html>

 

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。