如何隐藏画布或任何其他对象？ [复制]

Posted 2023-05-07

【中文标题】如何隐藏画布或任何其他对象？ [复制]

【英文标题】：How do I hide a canvas or any other object? [duplicate]

【发布时间】：2020-05-03 22:33:12

【问题描述】：

所以我有一个主画布，上面有三个画布。和一段文字。

<canvas id="Background"  
style="border:6px solid black; position: absolute; left: 10px; top: 10px;">
</canvas>

<canvas id="Canvas1"  
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1"  
style="border:6px solid yellow; position: absolute; left: 33px; top: 200px;">
</canvas>

<canvas id="Canvas1"  
style="border:6px solid blue; position: absolute; left: 33px; top: 20px;">
</canvas>

<canvas id="Canvas1"  
style="border:6px solid blue; position: absolute; left: 243px; top: 20px;">
</canvas>

</div>
<div style="position: absolute; left: 70px; top: 50px;">
<p> example </p>
</div>

稍后将添加onclick 事件，当我单击时，我希望文本和其中一个画布消失。基本上我想知道如何在这段代码中显示/隐藏项目。谢谢！

【问题讨论】：

Id 应该是唯一的，我想您的问题可能是重复的，但这应该对您有所帮助：w3schools.com/howto/howto_js_toggle_hide_show.asp

值得注意的是，DOM 中不能有多个具有相同 ID 的元素。

我不知道为什么它说我的问题是重复的，但是是的，谢谢，我将使用该链接作为参考！

【参考方案1】：

使用display: none 或visibility: hidden。不同之处在于display: none 将项目从视图中完全删除，而visibility: hidden 保留了元素所在的空白空间。哪个合适取决于您的用例。

JS 看起来大致像document.getElementById("Canvas1").style.display = "none";

【讨论】：

它的同谋是疯狂的。谢谢那个人！

【参考方案2】：

您可以使用 css 属性 visibility 或 display 来实现此目的。 在你的代码中，如果你想隐藏文本，只需给文本 div 一个 id 为text ，如下所示：

<div style="position: absolute; left: 70px; top: 50px;" id="text">
  <p> example </p>
</div>

并在脚本文件或标签中定义一个函数，如下所示：

function hideElement () 
  document.getElementById('text').style.display = 'none'

  // For Canvas1

 document.getElementById('Canvas1').style.display = 'none'


hideElement()

【讨论】：

这不仅有用，我也不知道如何用它创建函数……但现在我知道了。非常感谢！