我有一個應用程序，它接受 html 作為輸入，渲染圖像并保存它。它還要求用戶指定圖像的寬度和高度。我想自動化高度和寬度部分，這樣用戶就不需要手動設置它問題：如果html很簡單，<p>text</p>高度很容易通過使用找到clientHeight，但寬度將是視口的整個寬度，并且大部分絕對不需要顯示text，因此圖片會很窄（高度= 16px； width = 1080px) 這不太好。問題：有什么方法可以找到它實際使用的元素的寬度嗎？（例如所需的寬度<p>text</p>將接近 16px，但不是 1080px）
1 回答
qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
您遇到此錯誤是因為 和 等元素<p>默認<div>會擴展父級的整個寬度。你應該用width: fit-content它來阻止它。
div {
background-color: blue;
}
p {
background-color: red;
}
.width {
width: fit-content;
}
<div>This is a DIV with width: auto</div>
<p>This is a P with width: auto</p>
<div class="width">This is a DIV with width: fit-content</div>
<p class="width">This is a P with width: fit-content</p>
clientHeight將返回整個窗口的高度。您應該只關注要渲染的元素的父元素，以獲得更好的閱讀效果。使用offsetWidth和offsetHeight來獲取父級的完整寬度。
var div = document.getElementById('div');
div.innerHTML = 'Width: ' + div.offsetWidth + '<br>Height: ' + div.offsetHeight;
.square {
width: 100px;
height: 100px;
background-color: blue;
}
<div id="div" class="square"></div>
- 1 回答
- 0 關注
- 139 瀏覽
添加回答
舉報
0/150
提交
取消