[英]How to make a DIV visible and invisible with JavaScript
Can you do something like你能做类似的事情吗
function showDiv()
{
[DIV].visible = true;
//or something
}
if [DIV] is an element then如果 [DIV] 是一个元素,那么
[DIV].style.visibility='visible'
OR要么
[DIV].style.visibility='hidden'
Let's assume you do not use a library such as jQuery.假设您不使用诸如 jQuery 之类的库。
If you do not already have a reference to the DOM element, get one using var elem = document.getElementById('id');
如果您还没有对 DOM 元素的引用,请使用
var elem = document.getElementById('id');
获取一个引用var elem = document.getElementById('id');
Then you can set any CSS property of that element.然后您可以设置该元素的任何 CSS 属性。 To show/hide, you can use two properties:
display
and visibility
, which have slightly different effects:要显示/隐藏,您可以使用两个属性:
display
和visibility
,它们的效果略有不同:
Adjusting style.display
will look as if element is not present at all ("removed").调整
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)
or style.visibility
will actually make the div still be there, but be "all empty" or "all white"或
style.visibility
实际上会使 div 仍然存在,但“全部为空”或“全部为白色”
elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
elem.style.visibility = 'visible';
If you are using jQuery, you can do it even easier as long as you want to set the display
property:如果您使用的是 jQuery,只要您想设置
display
属性,您就可以更轻松地做到这一点:
$(elem).hide();
$(elem).show();
It will automatically use the appropriate display
value;它会自动使用合适的
display
值; you do not have to care about the element type (inline or block).您不必关心元素类型(内联或块)。 Additionally,
elem
can not only be a DOM element but also a selector such as #id
or .class
or anything else that is valid CSS3 (and more!).此外,
elem
不仅可以是 DOM 元素,还可以是选择器,例如#id
或.class
或任何其他有效的 CSS3(以及更多!)。
You can use visibility
or display
but you have to apply changes to the div.style
object and not the div
object itself.您可以使用
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';
You can use the DOM functions: setAttribute and removeAttribute.您可以使用 DOM 函数:setAttribute 和 removeAttribute。 In the following link you have an example of how to use them.
在以下链接中,您有一个如何使用它们的示例。
setAttribute and removeAttribute functions setAttribute 和 removeAttribute 函数
A quick view:快速浏览:
hide: document.getElementById("myDiv").setAttribute("hidden","");
unhide: document.getElementById("myDiv").removeAttribute("hidden");
You can use opacity
which is similar to visibility
but allow to smooth transition and control other parameters like height (for snippet simplicity I put js logic in html directly - don't do it in production code)您可以使用类似于
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>
Use 'hidden' attribute of DOM element:使用 DOM 元素的 'hidden' 属性:
function showDiv(isVisible)
{
[DIV].hidden = !isVisible;
}
Make Invisible using CSS使用 CSS 隐藏
#div_id {
/*height: 400px;*/
visibility:hidden;
}
Make Visible using Javascript使用 Javascript 使可见
document.getElementById('div_id').style.visibility = 'visible';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.