計算DOM 元素中的行數
可以確定DOM 元素中文字的行數,但這需要一些考慮元素的樣式和尺寸。
DOM 中的自動換行符
文字中的自動換行符不會直接在 DOM 本身中表示。 DOM 只包含原始文字內容。
根據元素高度計算行數
但是,如果元素的高度取決於其內容,則可以估計行數通過將高度除以字體行高來劃分行。
<code class="js">var divHeight = document.getElementById('content').offsetHeight; var lineHeight = document.getElementById('content').style.lineHeight; var lines = divHeight / lineHeight;</code>
間距和填充的調整
請記住,填充和行間間距可能會影響
示例
以下程式碼示範如何計算具有設定行高的div 元素中的行數:
<code class="html"><div id="content" style="width: 80px; line-height: 20px"> hello how are you? hello how are you? hello how are you? hello how are you? </div></code>
<code class="js">function countLines() { var el = document.getElementById('content'); var divHeight = el.offsetHeight; var lineHeight = parseInt(el.style.lineHeight); var lines = divHeight / lineHeight; alert("Lines: " + lines); }</code>
此程式碼顯示一個警報,其中包含div 元素中的行數。
以上是如何計算 DOM 元素中的行數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!