快捷導(dǎo)航

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

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

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

前言

在開(kāi)發(fā)的時(shí)候會(huì)遇到這種情況，只顯示兩行，如果超過(guò)兩行，則顯示一個(gè)“顯示更多”的按鈕，點(diǎn)擊按鈕來(lái)顯示剩余行的內(nèi)容。有個(gè) jQuery 的插件 loadingDots 專門(mén)實(shí)現(xiàn)了這個(gè)功能。不過(guò)今天這里我們要用原生的Javascript來(lái)實(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)然，有些樣式會(huì)被瀏覽器給屏蔽，比如，你要獲取一個(gè)鏈接的顏色，并準(zhǔn)備通過(guò)顏色來(lái)判斷用戶是否訪問(wèn)過(guò)某個(gè)地址，那肯定是不行的。

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

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

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

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

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

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

您可能感興趣的文章: