Chrome div.clientHeight=0 当 innerText 或 innerHTML = space 字符

Question

我运行遇到了一个非常奇怪的问题...

在创建 DIV 元素时，我将其添加到 DOM 并将 innerText 属性设置为单个 space 字符。当我检查 clientHeight 属性时，它是 0。如果我将它更改为某物...说字母 'a'，clientHeight 属性更改为 18.

在控制台中输入。

aa = document.createElement("div")
<div></div>
aa.clientHeight
0
aa.innerText = ' ';
' '
aa.clientHeight
0
document.body.appendChild(aa);
<div> </div>
aa.clientHeight
0
aa.innerText = 'a';
'a'
aa.clientHeight
18
aa.innerText = ' ';
' '
aa.clientHeight
0

我在 Firefox 中尝试了同样的事情，它正在做完全相同的事情。这是标准的一部分还是什么？我想这可能是因为 Firefox 正在做完全相同的事情。我没有 Apple 设备，所以无法在 Safari 中尝试。

我可以将 style.height 设置为强制为 18...

有什么建议或想法吗？

Answer 1

HTML 使用一种称为 whitespace collapse 的行为——浏览器会将多个 HTML space 显示为一个 space，并且还会忽略 spaces 元素前后和元素外部。

因此，当您将 space 设置为文本且 div 没有其他任何内容时，HTML 会完全忽略它。要添加 space 您可以使用 HTML Non-Breaking Space( ) 但由于它不是文本而是 HTML 您将不得不使用 innerHTML 而不是 innerText.

我创建了一个 codepen 供您使用

https://codepen.io/jaydave1412/pen/qBVMGpe

Chrome div.clientHeight=0 当 innerText 或 innerHTML = space 字符

Chrome div.clientHeight=0 when innerText or innerHTML = space character

html

javascript

google-chrome