如何使用 JavaScript 使 DIV 可见和不可见

Question

你能做类似的事情吗

function showDiv()
{
    [DIV].visible = true;
    //or something
}

Answer 1

如果 [DIV] 是一个元素，那么

[DIV].style.visibility='visible'

要么

[DIV].style.visibility='hidden' 

Answer 2

假设您不使用诸如 jQuery 之类的库。

如果您还没有对 DOM 元素的引用，请使用var elem = document.getElementById('id');获取一个引用var elem = document.getElementById('id');

然后您可以设置该元素的任何 CSS 属性。 要显示/隐藏，您可以使用两个属性： display和visibility ，它们的效果略有不同：

调整style.display看起来好像元素根本不存在（“已删除”）。

elem.style.display = 'none'; // hide
elem.style.display = 'block'; // show - use this for block elements (div, p)
elem.style.display = 'inline'; // show - use this for inline elements (span, a)

或style.visibility实际上会使 div 仍然存在，但“全部为空”或“全部为白色”

elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';

---

如果您使用的是 jQuery，只要您想设置display属性，您就可以更轻松地做到这一点：

$(elem).hide();
$(elem).show();

它会自动使用合适的display值； 您不必关心元素类型（内联或块）。 此外， elem不仅可以是 DOM 元素，还可以是选择器，例如#id或.class或任何其他有效的 CSS3（以及更多！）。

Answer 3

您可以使用visibility或display但您必须将更改应用于div.style对象而不是div对象本身。

var div = document.getElementById('div_id');

// hide
div.style.visibility = 'hidden';
// OR
div.style.display = 'none';

// show
div.style.visibility = 'visible';
// OR
div.style.display = 'block';

Answer 4

您可以使用 DOM 函数：setAttribute 和 removeAttribute。 在以下链接中，您有一个如何使用它们的示例。

setAttribute 和 removeAttribute 函数

快速浏览：

hide:    document.getElementById("myDiv").setAttribute("hidden","");
unhide:  document.getElementById("myDiv").removeAttribute("hidden");

Answer 5

您可以使用类似于visibility opacity ，但允许平滑过渡并控制其他参数，如高度（为了代码段简单，我将 js 逻辑直接放在 html 中 - 不要在生产代码中这样做）

 .box { width:150px; height: 150px; background: red; transition: 0.5s } .hide { opacity: 0; height: 10px}

 <div id="box" class="box"></div> <button onclick="box.classList.toggle('hide')">Toggle</button>

Answer 6

使用 DOM 元素的 'hidden' 属性：

function showDiv(isVisible)
{
    [DIV].hidden = !isVisible;
}

Answer 7

使用 CSS 隐藏

#div_id {
        /*height: 400px;*/
         visibility:hidden;
    }

使用 Javascript 使可见

document.getElementById('div_id').style.visibility = 'visible';