說我有這個代碼：
<div style="width: 100px; height: 100px; background: yellow; font-size: 150px">
X
</div>
字體大小為 150px 時，div 內的文本比 div 本身大也就不足為奇了。至少在谷歌瀏覽器中是這樣。
我的問題是……我該如何計算固定大小的 div 中文本的高度/寬度？
使用 jQquery，與 和$(...).height()一樣回傳 100 。$(...).innerHeight()$(...).outerHeight()
我的意思是，使用這個例子，它非常簡單。高度大概是150px。但是當你做這樣的事情時它會變得更加復雜：
<div style="width: 100px; height: 100px; background: yellow; font-size: 30px">
hello, world! hello, world! hello, world!
</div>
有任何想法嗎？
https://jsfiddle.net/p0xLv1qj/
uj5u.com熱心網友回復：
好吧，您可以創建一個僅包含文本的新元素，將其添加到您的身體的一小段時間，然后獲取高度。
這就是我想出的 - 它回傳 204，字體大小為 30：
var newEl = document.createElement("p");
newEl.innerHTML = document.getElementById("myDiv").innerHTML;
newEl.style.fontSize = document.getElementById("myDiv").style.fontSize;
newEl.style.width = document.getElementById("myDiv").style.width;
document.body.appendChild(newEl);
alert(newEl.clientHeight);
newEl.remove();
uj5u.com熱心網友回復：
希望這個技巧對你有用。
<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
hello, world! hello, world! hello, world!
</div>
<br/>
<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
hello, world! test
</div>
<br/>
<div style="width: 100px; height: auto; min-height:100px; background: yellow; font-size: 30px">
hello, world! testing data
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365492.html
標籤：javascript html 查询 css