前言
在开发的时候会遇到这种情况,只显示两行,如果超过两行,则显示一个“显示更多”的按钮,点击按钮来显示剩余行的内容。有个 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能有所帮助。如果有疑问可以留言讨论。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“用原生js统计文本行数的简单示例”评论...
更新动态
2024年05月10日
2024年05月10日
- 群星《妖神令 影视原声专辑》[320K/MP3][85.23MB]
- 逆水寒手游五子棋第二十三关怎么过 逆水寒手游残局攻略大全
- 逆水寒手游五子棋第二十二关怎么过 逆水寒手游残局攻略大全
- 欢乐钓鱼大师最稀有的鱼是什么 欢乐钓鱼大师最稀有的鱼攻略
- ABC唱片-《蔡琴.三十周年纪念版》6N纯银镀膜[WAV+CUE]
- ABC唱片-《汉斯.德斯辛克.心中布鲁斯》6N纯银镀膜[WAV+CUE]
- 群星《DJ·夜色魅影HQ》头版限量[低速原抓WAV+CUE]
- 《如龙》桐生声优被警察拦下盘问:你有犯罪记录吗?
- 游族2023年净利润0.91亿元 《少年西游记2》即将公测
- 曝快手北京游戏事业部全数被裁 项目测试数据未达标
- 李雨寰.2012-我可是天使【有凰音乐】【WAV+CUE】
- 刘美君.1991-听我细诉【BMG】【WAV+CUE】
- 群星.2016-滚石爱情故事3CD【滚石】【WAV+CUE】
- 欢乐钓鱼大师怎么解锁全地图 欢乐钓鱼大师全地图解锁方法
- 欢乐钓鱼大师锦标赛在哪里进 欢乐钓鱼大师锦标赛入口位置介绍