快捷導(dǎo)航

用原生js統(tǒng)計(jì)文本行數(shù)的簡單示例

更新時(shí)間：2016年08月19日 15:32:52 投稿：daisy

這篇文章我們來看看如何利用原生的JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本的行數(shù)，代碼實(shí)現(xiàn)起來很簡單，有需要的可以參考借鑒。

前言

在開發(fā)的時(shí)候會遇到這種情況，只顯示兩行，如果超過兩行，則顯示一個(gè)“顯示更多”的按鈕，點(diǎn)擊按鈕來顯示剩余行的內(nèi)容。有個(gè) jQuery 的插件 loadingDots 專門實(shí)現(xiàn)了這個(gè)功能。不過今天這里我們要用原生的Javascript來實(shí)現(xiàn)，要實(shí)現(xiàn)這個(gè)需求，最關(guān)鍵的是要確定這個(gè)容器內(nèi)文本的行數(shù)，得到行數(shù)后，修改元素高度，并確定是否顯示加載按鈕。

window.getComputedStyle()

要使用原生 JavaScript 代碼獲取一個(gè)元素的各個(gè) style 屬性，使用 window.getComputedStyle() 是必然的。它可以返回一個(gè) HTML 元素在瀏覽器中真正顯示時(shí)的各個(gè)樣式——當(dāng)然，有些樣式會被瀏覽器給屏蔽，比如，你要獲取一個(gè)鏈接的顏色，并準(zhǔn)備通過顏色來判斷用戶是否訪問過某個(gè)地址，那肯定是不行的。

該方法返回的，是一個(gè)樣式鍵值對，是 CSSStyleDeclaration 的實(shí)例。各屬性索引名沒有 - ，且采用駝峰命名法。比如 lineHeight 。

行數(shù) = 整體高度 / 行高

整體高度通過 height 可以獲取。行高可以通過 lineHeight 獲取，將其結(jié)果再取整即可得到行數(shù)。

但有個(gè)問題，如果沒有針對一個(gè)元素設(shè)置 line-height 值，則其默認(rèn)值為 normal ，這個(gè)值在桌面瀏覽器中通常是 1.2 ，但還與字體有關(guān)。因此，最好是對需要計(jì)算行數(shù)的元素設(shè)置一下 line-height 值。

一個(gè)簡單的實(shí)現(xiàn)如下：

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 />
“今天的中國人一如當(dāng)年的德國人，沉迷于‘崛起'幻覺，習(xí)慣于聽信他人的吹捧，還想當(dāng)然地認(rèn)為只要中國繼續(xù)保持經(jīng)濟(jì)增長，不僅未來的經(jīng)濟(jì)總量超越‘世界老大'美國可以期待，中國實(shí)現(xiàn)全面復(fù)興也將是囊中之物?！鄙虾Ｍ鈬Z大學(xué)國際關(guān)系與公共事務(wù)學(xué)院教授程亞文在其新著《大國戰(zhàn)略力》中尖銳地指出中國現(xiàn)下有不少人陷入了“盛世”幻覺，并沒有意識到在經(jīng)濟(jì)總量的背后，中國其實(shí)還是一個(gè)極為落后的國家。世界上還沒有一個(gè)大國是在風(fēng)平浪靜中興起的，中國的新一輪文明復(fù)興也將充滿風(fēng)險(xiǎn)和曲折。防止國家崩潰、解體或衰敗應(yīng)該成為中國國家戰(zhàn)略的重中之重。染上“軟乎乎的幸福主義”只會讓一個(gè)國家變得脆弱。
</p>
<p>行數(shù)：<span id="shower"></span></p>
改變窗口大小，自動計(jì)算
<button onclick="countLines()">立刻計(jì)算</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]

總結(jié)

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家使用Javascript能有所幫助。如果有疑問可以留言討論。

您可能感興趣的文章: