Javascript 无法 Show/hide Dom 元素（以 Pannellum 为例）

Question

当我尝试使用 javascript 调用 document.getElementById(elemId).style.visibility = hide/show DOM 中的一个元素时遇到问题visible/hidden.

这是一个非常奇怪的行为，当我通过 id 获取 DOM 元素并将可见性设置为可见时，在控制台中我可以看到内联样式已被修改但屏幕上的元素仍然隐藏。

我会link一个fiddle我的问题的例子，希望有人能帮助

这是我用于 hide/show DOM 元素的函数

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId);
  if (typeof elem !== 'undefined' && elem !== null) {
    document.getElementById(elmId).style.visibility = value;
    console.log(elem);
  }
}

反正直接调用document.getElementById('2').style.visibility = 'visible'也不行

PS 我想要实现的是显示感叹号上的跨度，即对于 css 默认值，隐藏

Fiddle Demo

Answer 1

我检查了你的fiddle，但是你在下面代码中提到的id不存在：

updateHTML("8", "visible");

在你的更新功能中你这样做...

function updateHTML(elmId, value) {
  var elem = document.getElementById(elmId); // <- this line
  if (typeof elem !== 'undefined' && elem !== null) {
    document.getElementById(elmId).style.visibility = value;
    console.log(elem);
  }
}

但是你得到了不存在的元素的 id。

其他things:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Answer 2

当您调用 updateHtml 时，元素尚未创建。

为了测试 在 1 秒后的超时调用中添加了 updateHtml，它起作用了。

setTimeout(() => updateHTML("8", "visible"), 1000);

jsfiddle demo

Javascript 无法 Show/hide Dom 元素（以 Pannellum 为例）

Javascript unable to Show/hide Dom Element (on Pannellum example)

javascript

dom

pannellum