Javascript 如何创建隐藏元素和内联块_Javascript_Jquery_Html_Css

Javascript 如何创建隐藏元素和内联块

javascript jquery html css

Javascript 如何创建隐藏元素和内联块,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个div，我想既是内联块，又不显示，但我必须选择其中一个我的HTML： .like_user_wrapper{ margin-top:20px; padding:5px; height:55px; box-shadow:1px 1px 10px #f0f0f0; background:white; display:inline-block; display:none; } 让div只使用JavaScript隐藏不是一个好主意只使

我有一个div，我想既是内联块，又不显示，但我必须选择其中一个

我的HTML：

.like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    display:none;
}

让div只使用JavaScript隐藏不是一个好主意

只使用

可见性：隐藏
#like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}

注意，这是使用自定义ID（#
..），而不是类（
..）
如果希望在某个时刻变得可见，可以使用该ID的JavaScript属性：
document.getElementById('like_user_wrapper').style.visibility='visible'; 

这可以包含在onmouseover=“
”或javascript函数等中，以便在需要时显示。这可以在html中实现：

#像用户包装器一样{
边缘顶部：20px；
填充物：5px；
高度：55px；
盒影：1px10px#f0；
背景：白色；
显示：内联块；
可见性：隐藏；
}
#盘旋{
宽度：80px；
高度：50px；
背景色：红色；
}
像用户包装器



在我上空盘旋

有关可见性CSS属性的帮助页
注意：在大多数浏览器中，默认情况下DIV具有display属性block
，因此您可能不需要内联块
——您可以使用该属性将其包装在
中。
如果您试图使用jQuery隐藏和显示元素，请避免使用jQuery.show（）

而是执行$（'.like_user_wrapper'）.css（{'display'：'inline block'）以显示元素
另一方面，要隐藏它，只需执行$（'.like_user_wrapper'）.hide（）即可
并从css中删除显示：内联块
。
是可见性：隐藏选项？你到底想要什么？重点是什么？如果它是display:none
，则任何尺寸/定位计算都不计算在内。如果你想让它计算大小/定位，但仍然是不可见的，那么就如哈希姆所指出的那样，让它可见性：隐藏或<代码>位置：相对；左：-9999px
将其设置为内联块
和显示：无完全是胡说八道。实际上，我的语气很烦人。你基本上没有给我们任何有用的信息，也没有理由需要这样的东西。如果我们能回答这个问题的唯一方法是玩20个问题，最终得到一些有用的信息，那么这个问题就不属于这里。
<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}
#hover {
    width: 80px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>