将隐藏属性应用于span

Question

我正在尝试模仿隐藏此元素的方式......似乎没有任何css应用于跨度以隐藏它们：

<span hidden>E</span>

我试过了：

    var letter = document.createElement('span');
    letter.innerHTML = message.split("")[i];
    letter.style.display = 'none';

但这样做：

   <span style="display: none;">E</span>

spans是裸的，这意味着它们没有与之关联的任何类名。意思是，它们是这样的：

<span hidden>x</span>
<span hidden>y</span>
<span hidden>z</span>

有办法做到这一点吗？

Answer 1

试试这个：

var letter = document.createElement('span');
letter.innerHTML = message.split("")[i];
letter.setAttribute("hidden","");

Answer 2

你可以尝试：

letter.setAttribute("style", "display:none");

或：

letter.style.cssText = "display:none";

或者您可以在元素上设置一个类，并使用它来隐藏范围：

letter.className = "hide";

.hide{
  display:none;
 }

Answer 3

有趣。在现代浏览器中，设置隐藏属性应该自己完成。可能有一些CSS覆盖了浏览器的默认显示属性。你可以尝试添加它来修复它。

*[hidden] { display: none !important; }

注意：在CSS上使用“！important”标记应该极其。由于这是修复浏览器默认功能，我认为它是一个有效的使用场景。