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

Question

我有一个应用程序，它接受 html 作为输入，渲染图像并保存它。它还要求用户指定图像的宽度和高度。我想自动化高度和宽度部分，这样用户就不需要手动设置它问题：如果html很简单，<p>text</p>高度很容易通过使用找到clientHeight，但宽度将是视口的整个宽度，并且大部分绝对不需要显示text，因此图片会很窄（高度= 16px； width = 1080px) 这不太好。问题：有什么方法可以找到它实际使用的元素的宽度吗？（例如所需的宽度<p>text</p>将接近 16px，但不是 1080px）

Answer 1

您遇到此错误是因为 和 等元素<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>