0

我有一个巨大的 html 页面，在 blockquotes 中有几十条评论

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

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

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

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

4

2 回答 2

1

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

最简单的方法似乎是清除blockquote元素内容并删除其默认的顶部和底部边距，这样它就会变成一个空块——它不占用任何空间，除非它意味着换行。要使操作可切换，您需要保存真实内容。例子：

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;
}

在恢复注释内容的代码中，您将执行相反的操作，innerHTML从savedContent顶部和底部边距恢复并设置。为了保持一致性，最好将这些边距静态设置为一些已知值，以便您可以恢复这些相同的值。

我希望像这样的属性名称savedContent足够安全（即，不会与元素节点的任何现有属性发生冲突），但为了真正安全，最好使用像这样的名称data-content，自然带有括号符号而不是点表示法，例如array[i]['data-content'].

于 2013-05-02T06:23:40.593 回答
0 
how about something like this

<br class="b"><blockquote>
commentary
</blockquote><br class="b">

then toggle the display of class b. so 
if blockquote is display:block class b is display:none

and 
if blockquote is display:none class b is display:inline
于 2015-10-08T18:05:01.960 回答