前言
在開發的時候會遇到這種情況，只顯示兩行，如果超過兩行，則顯示一個“顯示更多”的按鈕，點擊按鈕來顯示剩余行的內容。有個 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能有所幫助。如果有疑問可以留言討論。
新聞熱點
疑難解答
