获取实际使用的特定元素的宽度

Question

我有一个应用程序，它接受 html 作为输入，渲染图像并保存它。它还要求用户指定图像的宽度和高度。我想自动化高度和宽度部分，这样用户就不需要手动设置它

问题：

如果html很简单，<p>text</p>高度很容易通过使用找到clientHeight，但宽度将是视口的整个宽度，并且大部分绝对不需要显示text，因此图片会很窄（高度= 16px； width = 1080px) 这不太好。

问题：

有什么方法可以找到它实际使用的元素的宽度吗？（例如所需的宽度<p>text</p>将接近 16px，但不是 1080px）

Answer 1

您遇到此错误是因为 和 等元素<p>默认<div>会扩展父级的整个宽度。你应该用width: fit-content它来阻止它。div {&nbsp; background-color: blue;}p {&nbsp; background-color: red;}.width {&nbsp; 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 {&nbsp; width: 100px;&nbsp; height: 100px;&nbsp;&nbsp;&nbsp; background-color: blue;}<div id="div" class="square"></div>