20

This blog posttextContent建议避免innerText布局抖动。但它专注于检索元素的文本；对于设置元素文本，相反的情况似乎是正确的——至少在以下示例中是这样。

此示例使用innerText并且不产生布局抖动：

<style>
    #test {
        background-color: blue;
        float: right;
        width: 100px;
        height: 100%;
    }
</style>
Test test test
<div id="test"></div>
<script>
    setInterval(function() {
        document.querySelector('#test').innerText = 'innerText';
    }, 100);
</script>

图片

但是替换innerText为textContent并观察它的颠簸：

图片

有人可以解释这种行为吗？我可以做些什么来避免布局颠簸并仍然以基于标准的方式更改元素的文本？

4

2 回答 2

12

问题：

你是对的！就像你观察到的那样。设置textContent确实会导致抖动。

这是DOM 规范必须说的：

DOMString 类型的textContent，在 DOM Level 3 中引入

此属性返回此节点及其后代的文本内容。定义为null时，设置无效。设置时，此节点可能具有的任何可能的子节点都将被删除，如果新字符串不为空或 null，则替换为包含此属性设置为的字符串的单个 Text 节点。

修复

一种非颠簸的方式是获取元素的文本节点并修改它们而不是使用textContentor innerText（这是非标准的）。

var test = document.getElementById("test");
var a = document.createTextNode("");
test.appendChild(a);
setInterval(function(){
    a.nodeValue = "Test test test";
},100);

这是一个工作小提琴

当然，如果实际文本会发生变化，则必须进行绘制以更新您所看到的内容。

轮廓

于 2013-06-19T23:32:56.447 回答
2

除了Benjamin answer之外，我注意到当nodeValueor的值innerText与前一个不同时，整个文档布局也被丢弃，如您在此处看到的：http: //jsfiddle.net/5N7Rr/15/

（全屏，在新标签页中打开） 在此处输入图像描述

浏览器会丢弃整个布局，因为他不知道元素的大小，所以避免整个文档被丢弃的技巧是设置一个固定的height和width设置overflow为hidden（重要）。这样你告诉浏览器无论元素的内容是什么，它都不会退出元素边界。

编辑 30/11/2020：我还需要添加CSS 属性 contain: strict以明确告诉浏览器内容不会退出容器。

小提琴：http: //jsfiddle.net/u9pra25f/

和证明（再次全屏）。请注意布局更新如何仅影响元素： 在此处输入图像描述

于 2017-06-06T21:01:59.967 回答