Question

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

我试图通过一次点击提供隐藏所有评论的链接，因此我使用了这个

var array = document.getElementsByTagName（'blockquote'）; for（var i = 0; i＆lt; array.length; i ++）{ array [i] .style.display ='none'; }

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

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

Answer 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']。

Answer 2

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

隐藏Blockquotes但替换为Newline

2 个答案: