document.style.display不因为某些原因而坚持 [英] document.style.display not sticking for some reason

问题描述

编辑：所以我改变了style.display块，其中一些工作。

$ b

另一个编辑：

$ b b $ b

在我的CSS我有一个显示：没有。
当我删除这个，它的工作原理。但这不是好的，因为元素应该只有在onclick后可用。为什么要将其设置为不显示从不显示它？

---

这里有一个简单的脚本。基本上，我想将一个面板的所有内容设置为不可见（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）; 
} 
  

一些注释：全宽度以下列形式返回textAreas的完整列表：

  [textarea＃page-description-textarea.full-width，textarea＃keywords-text-area.full-width，textarea ＃file-textarea.full-width，textarea＃internal-links-textarea.full-width，textarea＃external-links-textarea.full-width] 
  

在设置完所有循环后，我将指定的textArea（divToShow）设置为表格，但之后没有任何显示。

任何想法？

b pre> < div id =text-column>
< div id =page-description-text>
< textarea id =page-description-textareaclass =full-width>页面描述< / textarea>
< / div>
< div id =keywords-text>
< textarea id =keywords-text-areaclass =full-width>关键字< / textarea>
< / div>
< div id =files-text>
< textarea id =files-textareaclass =full-width> files< / textarea>
< / div>
< div id =internal-links-text>
< textarea id =internal-links-textareaclass =full-width> internal< / textarea>
< / div>
< div id =external-links-text>
< textarea id =external-links-textareaclass =full-width> external< / textarea>
< / div>
< / div>


最后要注意的是所有textArea元素都设置为不可见。

解决方案

您是否传递正确的 id 到您的 showText（）函数？

由于您的变量名为 divToShow ，我想你传递< div> 的 id 正确设置 display：table ，但您已实际隐藏< textarea>

如果您通过的 id textarea> ，而是代码函数按预期工作，如 此演示 。

EDIT: so I changed the style.display to block and some of them worked. the internal and external textareas are coming back with element not found

---

Another edit:

In my CSS I had a display:none. When I remove this, it works. But thats no good as the element should only be available after an onclick. Why would setting it to display none stop it from ever being displayed?

---

I have a simple script here. Basically I wanted to set all the contents of a panel to be invisible (document.style.display ="none") and then after I've gone through all the contents, set one to be visible as indicated by the method.

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);
}

Some notes: full width returns a full list of textAreas in the form of:

[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]

At the end of the loop after they've all been set, I set the specified textArea(divToShow).display to be table but yet nothing shows afterwards.

Any ideas? Am i overlooking something?

---

edit: Added html for textareas

 <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>

One last thing to note is all the textArea elements do set themselves to be invisible. They just don't come back.

解决方案

Are you passing the correct id to your showText() function?

Due to the fact that your variable is named divToShow, I think you are passing the id of the <div> which is correctly setting display:table but you've actually hidden the <textarea> child, which stays hidden.

If you pass the id of the <textarea> instead, the code function works as expected, as in this demo.

这篇关于document.style.display不因为某些原因而坚持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！