更改< div>动态可见性 [英] Change <div> visibility dynamically

问题描述

我正在测试一段代码来动态更改

I am testing a piece of code to dynamically change a

块的可见性。下面的代码用于将可见性从可见变为隐藏。但是，如果最初

block's visibility. The code below works to change the visibility from visible to hidden. However, if initially the

visibility ='hidden'，则JS中的变量：v为null，因此不能更改

visibility='hidden', the variable: v in the JS is null, and thus the

块的样式。什么是解决这个问题的正确解决方案？我想动态地将

block's style can't be altered. What's the proper solution to solve this problem? I want to dynamically turn the

块从'hidden'转换为'visible'。谢谢。

block from 'hidden' to 'visible'. Thanks.

        <div id="test_div" class="app1" style="visibility:visible;">
            This is a test
        </div>
......
            function addRecord() {
                debugger;
                var v = document.getElementById('test_div');
                v.style.visibility='visible';
            }

推荐答案

有不同的方法可以随时改变可见性。哪一个使用？它取决于目的，它应该如何影响布局。请注意，有时可能会发生隐形元素。所以，这里有一些选项：

There are different ways to change visibility at anytime. Which one to use? it depends on the purpose, on how it should affect the layout. Note that invisible element may sometimes take place. So, here are some options:

function hide(object) { object.style.visibility = "hidden"; }
function show(object) { object.style.visibility = null; }

//by changing display style:
function hideDisplay(object) { object.style.display = 'none'; }
function showDisplay(object) {
    object.style.display = 'block'; /* or whatever you want to use */
}

// with complete removal of children:
function SomeControl() {

   // some elements:
   parent = //...
   oneChild = //...
   anotherChild = //...
 
   this.hideChildren = function() {
      [oneChild, anotherChild].forEach(function (element) {
          parent.removeChild(element);
      });
   }
   this.showChildren = function() {
      // provided they should be at the end
      [anotherChild, oneChild].forEach(function (element) {
          parent.appendChild(element);
      });
   )

} //SomeControl constructor
// I'll leave for your home exercises the case
// when the hidden/shown children are somewhere in the middle

我确定不是全部。您可以在本文档中找到更多详细信息：

https://developer.mozilla.org/en-US/docs/Web/CSS [ ^ ]，

https://developer.mozilla.org/en-US/docs/Web/API/Document [ ^ ]。

https://developer.mozilla.org/en-US/docs/Web/API/Node [ ^ ]，

https://developer.mozilla.org/en-US/docs/Web/JavaScript [ ^ ]。



（请参阅我对该问题的评论。）

-SA

I'm sure it's not all. You can find a lot of further detail, for example, in this documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS[^],
https://developer.mozilla.org/en-US/docs/Web/API/Document[^].
https://developer.mozilla.org/en-US/docs/Web/API/Node[^],
https://developer.mozilla.org/en-US/docs/Web/JavaScript[^].

(Please see my comment to the question.)

—SA

除了解决方案2：



jQuery提供了进行此类操作所需的一切：

http://api.jquery.com/show [ ^ ]，

http://api.jquery.com/hide [ ^ ]，

https：// api .jquery.com / category / manipulation [ ^ ] ，

等...



如果你需要学习jQuery（强烈推荐），请参阅：

http://en.wikipedia.org/wiki/JQu ery ，

http://jquery.com ，

< a href =http://learn.jquery.com/> http://learn.jquery.com ，

http://learn.jquery.com/using-jquery-core ，

http://learn.jquery.com/about-jquery/how-jquery-works （从这里开始）。



请记住，jQuery在设计时考虑了兼容性。

-SA

In addition to Solution 2:

jQuery provides all you need for such manipulations:
http://api.jquery.com/show[^],
http://api.jquery.com/hide[^],
https://api.jquery.com/category/manipulation[^],
and so on…

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

Remember that jQuery is designed with compatibility in mind.

—SA

好吧，如果你想动态显示/隐藏div，你可以使用jQuery show（）/ hide（）方法。这很简单。



假设您想要显示按钮点击的div，它最初会隐藏（有不同的方法可以隐藏;）。 br />
但首先，请看：

Well, if you want to dynamically show/hide the div, you can use jQuery show()/hide() methods. It's very easy.

Let's say you want to show the div on button click, which would hidden initially (there are different ways to make it hide ;).)
But first, see this:

这篇关于更改&lt; div&gt;动态可见性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！