我有一個(gè)應(yīng)用程序，它接受 html 作為輸入，渲染圖像并保存它。它還要求用戶指定圖像的寬度和高度。我想自動(dòng)化高度和寬度部分，這樣用戶就不需要手動(dòng)設(shè)置它問(wèn)題：如果html很簡(jiǎn)單，<p>text</p>高度很容易通過(guò)使用找到clientHeight，但寬度將是視口的整個(gè)寬度，并且大部分絕對(duì)不需要顯示text，因此圖片會(huì)很窄（高度= 16px； width = 1080px) 這不太好。問(wèn)題：有什么方法可以找到它實(shí)際使用的元素的寬度嗎？（例如所需的寬度<p>text</p>將接近 16px，但不是 1080px）
1 回答
qq_遁去的一_1
TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊
您遇到此錯(cuò)誤是因?yàn)?和 等元素<p>默認(rèn)<div>會(huì)擴(kuò)展父級(jí)的整個(gè)寬度。你應(yīng)該用width: fit-content它來(lái)阻止它。
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將返回整個(gè)窗口的高度。您應(yīng)該只關(guān)注要渲染的元素的父元素，以獲得更好的閱讀效果。使用offsetWidth和offsetHeight來(lái)獲取父級(jí)的完整寬度。
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 關(guān)注
- 152 瀏覽
添加回答
舉報(bào)
0/150
提交
取消