javascript - 隐藏 block 引用但替换为换行符

Question

我有一个巨大的 html 页面，在 blockquotes 中包含许多评论

我试图提供一个链接来一键隐藏所有评论，所以我使用了这个

var array = document.getElementsByTagName('blockquote');for(var i = 0; i < array.length; i++) { array[i].style.display = '无';

这工作正常，但问题是 blockquote 元素也作为换行符工作。现在，当我隐藏 blockquote 元素时，没有换行符。

有没有办法隐藏 block 引用并替换为换行符？这需要在不删除 block 引号中的所有文本的情况下完成，因为它是一个切换显示/隐藏评论。

Answer 1

当您设置display: none 时，该元素不会影响渲染；该页面将显示为好像该元素根本不存在。因此，您需要使用其他一些内容隐藏方法，以便让元素仍然引起一些问题，例如换行符。

最简单的方法似乎是清除 blockquote 元素内容并删除其默认的顶部和底部边距，这样它就会变成一个空 block ——除了在某种意义上不占用空间它意味着换行符。要使操作可切换，您需要保存真实内容。示例:

var array = document.getElementsByTagName('blockquote');
for(var i = 0; i < array.length; i++) { 
   array[i].savedContent = array[i].innerHTML;
   array[i].innerHTML = '';
   array[i].style.margin = 0;
}

在恢复评论内容的代码中，您将执行相反的操作，从savedContent 恢复innerHTML 并设置上下外边距。为了保持一致性，最好将这些边距静态设置为一些已知值，这样您就可以恢复这些相同的值。

我希望像 savedContent 这样的属性名称足够安全(即不与元素节点的任何现有属性冲突)，但为了真正安全，它可能会更好使用像 data-content 这样的名称，自然地使用括号符号而不是点符号，例如 array[i]['data-content']。