javascript - document.style.display 由于某种原因不粘

Question

编辑:所以我将 style.display 更改为 block，其中一些有效。内部和外部文本区域返回时未找到元素

---

另一个编辑:

在我的 CSS 中有一个 display:none。当我删除它时，它起作用了。但这并不好，因为该元素只应在单击后可用。为什么将其设置为不显示会阻止它显示？

---

我这里有一个简单的脚本。基本上，我想将面板的所有内容设置为不可见(document.style.display ="none")，然后在浏览完所有内容后，按照方法指示将一个内容设置为可见。

Javascript:

function showText(divToShow)
{
    var docsToHide = document.getElementsByClassName("full-width");
    for (var i = 0; i<docsToHide.length;i++)
    {
        docsToHide[i].style.display="none";
    }
    var docToShow=document.getElementById(divToShow);
    docToShow.style.display="table";
    console.log(docToShow.style.display);
}

一些注意事项:全宽返回以下形式的完整文本区域列表:

[textarea#page-description-textarea.full-width, textarea#keywords-text-area.full-width, textarea#files-textarea.full-width, textarea#internal-links-textarea.full-width, textarea#external-links-textarea.full-width]

在所有设置完成后的循环结束时，我将指定的 textArea(divToShow).display 设置为表格，但之后没有任何显示。

有什么想法吗？我是不是忽略了什么？

---

编辑:为文本区域添加了 html

 <div id="text-column">
                    <div id="page-description-text">
                        <textarea id = "page-description-textarea" class="full-width">Page Description</textarea>
                    </div>
                    <div id="keywords-text">
                        <textarea id="keywords-text-area" class="full-width"> Keywords</textarea>
                    </div>
                    <div id="files-text">
                        <textarea id="files-textarea"class="full-width">files</textarea>
                    </div>
                    <div id="internal-links-text">
                        <textarea  id="internal-links-textarea" class="full-width">internal</textarea>
                    </div>
                    <div id="external-links-text">
                        <textarea id="external-links-textarea"class="full-width">external</textarea>
                    </div>
                </div>

最后要注意的是所有 textArea 元素都将自己设置为不可见。他们就是不回来了。

Answer 1

您是否传递了正确的 id给你的showText()功能？

由于您的变量名为 divToShow ，我认为你正在传递 id的 <div>这是正确设置 display:table但你实际上隐藏了<textarea> child ，它保持隐藏状态。

如果你通过 id的 <textarea>相反，代码功能按预期工作，如 this demo .