如何使用 A-Frame 隐藏元素？答案

【问题标题】：How can I hide an element with A-Frame?如何使用 A-Frame 隐藏元素？
【发布时间】：2017-01-05 17:31:03
【问题描述】：

使用 A-Frame 隐藏元素的最佳方法是什么？

我需要从 DOM 中删除元素吗？

【问题讨论】：

标签： aframe

【解决方案1】：

var el = document.querySelector("#yourElementId");

el.setAttribute("visible",false);

【讨论】：

【解决方案2】：

隐藏元素最简单的方法是visible 属性：

myElement.setAttribute("visible", false)

【讨论】：

嗨。你的意思是 myElement.setAttribute('visible', false); ?

【解决方案3】：

您也可以在 a-frame 标签本身上指定它，例如：

<a-image id="hand-overview-chart"
  src="#handOverviewImg" position="3 3 0"
  width="4" height="4" visible="false">
</a-image>

当然，您仍然需要 javascript 来捕获诸如“mouseenter”之类的事件以将其切换为可见：

document.querySelector('#myElParentId').addEventListener('mouseenter',myEventHandler); 

myEventHandler: function (evt) {
  let myEl = document.querySelector("#hand-overview-chart");
  myEl.setAttribute("visible","true");
}

【讨论】：

【解决方案4】：

visible="false" 的问题是它后面的元素将不可点击（因为元素在那里，但是是透明的）。因此，我发现的替代方法是使其宽度为零。这是我在鼠标单击时隐藏元素的方法：

document.getElementById("my_element_id").addEventListener('mousedown', function(evt) {
  document.getElementById("my_element_id").setAttribute("width", "0");
});

【讨论】：