用原生js统计文本行数的简单示例


Posted in Javascript onAugust 19, 2016

前言

在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个“显示更多”的按钮,点击按钮来显示剩余行的内容。有个 jQuery 的插件 loadingDots 专门实现了这个功能。不过今天这里我们要用原生的Javascript来实现,要实现这个需求,最关键的是要确定这个容器内文本的行数,得到行数后,修改元素高度,并确定是否显示加载按钮。

window.getComputedStyle()

要使用原生 JavaScript 代码获取一个元素的各个 style 属性,使用 window.getComputedStyle() 是必然的。它可以返回一个 HTML 元素在浏览器中真正显示时的各个样式——当然,有些样式会被浏览器给屏蔽,比如,你要获取一个链接的颜色,并准备通过颜色来判断用户是否访问过某个地址,那肯定是不行的。

该方法返回的,是一个样式键值对,是 CSSStyleDeclaration 的实例。各属性索引名没有 - ,且采用驼峰命名法。比如 lineHeight

行数 = 整体高度 / 行高

整体高度通过 height 可以获取。行高可以通过 lineHeight 获取,将其结果再取整即可得到行数。

但有个问题,如果没有针对一个元素设置 line-height 值,则其默认值为 normal ,这个值在桌面浏览器中通常是 1.2 ,但还与字体有关。因此,最好是对需要计算行数的元素设置一下 line-height 值。

一个简单的实现如下:

function countLines(ele) {
 var styles = window.getComputedStyle(ele, null);
 var lh = parseInt(styles.lineHeight, 10);
 var h = parseInt(styles.height, 10);
 var lc = Math.round(h / lh);
 console.log('line count:', lc, 'line-height:', lh, 'height:', h);
 return lc;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
 <title>Line Count</title>
 <style type="text/css">
  p {
   line-height: 1.3em;
  }
 </style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head>
<body>
<p id="target">She just made having a baby look lovely. Everything is white and she always has a fresh blueberry pie that's steaming and scones and clotted cream and she's reading The Old Man and the Sea and her little boy is rolly with bonnets. It's amazing, and I thought this is lovely. My kid is like playing with like explosive devices. I don't know where she's found them, like sticking them in our dog's ear. She already knows how to dry wall cause she puts holes in the wall.<br />
“今天的中国人一如当年的德国人,沉迷于‘崛起'幻觉,习惯于听信他人的吹捧,还想当然地认为只要中国继续保持经济增长,不仅未来的经济总量超越‘世界老大'美国可以期待,中国实现全面复兴也将是囊中之物。”上海外国语大学国际关系与公共事务学院教授程亚文在其新著《大国战略力》中尖锐地指出中国现下有不少人陷入了“盛世”幻觉,并没有意识到在经济总量的背后,中国其实还是一个极为落后的国家。世界上还没有一个大国是在风平浪静中兴起的,中国的新一轮文明复兴也将充满风险和曲折。防止国家崩溃、解体或衰败应该成为中国国家战略的重中之重。染上“软乎乎的幸福主义”只会让一个国家变得脆弱。
</p>
<p>行数:<span id="shower"></span></p>
改变窗口大小,自动计算
<button onclick="countLines()">立刻计算</button>

<script type="text/javascript">
var target = document.getElementById('target');
var shower = document.getElementById('shower');

function countLines(ele) {
 var styles = window.getComputedStyle(ele, null);
 var lh = parseInt(styles.lineHeight, 10);
 var h = parseInt(styles.height, 10);
 var lc = Math.round(h / lh);
 console.log('line count:', lc, 'line-height:', lh, 'height:', h);
 return lc;
}

function change() {
 shower.innerHTML = countLines(target);
}
window.onresize = change;
change();
</script>
</body>
</html>
[/html]

总结

以上就是本文的全部内容,希望本文的内容对大家使用Javascript能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
科讯商业版中用到的ajax空间与分页函数
Sep 02 Javascript
日期 时间js控件
May 07 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
JS实现六位字符密码输入器功能
Aug 19 #Javascript
You might like
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php过滤敏感词的示例
2014/03/31 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
2016/12/18 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
利用Python如何生成随机密码
2016/04/20 Python
TensorFlow的权值更新方法
2018/06/14 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python 多进程队列数据处理详解
2019/12/23 Python
Python运行DLL文件的方法
2020/01/17 Python
python是怎么被发明的
2020/06/15 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
党员检讨书范文
2014/12/27 职场文书
会计岗位工作总结
2015/08/12 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript