HTML标签隐藏与显示方法汇总

最新推荐文章于 2023-04-16 11:19:41 发布

lance666

最新推荐文章于 2023-04-16 11:19:41 发布

阅读量7.1k

点赞数 4

文章标签： html css javascript

本文链接：https://blog.csdn.net/lance666/article/details/112428986

版权

传统JS方法

<script language="JavaScript">
function displayHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display="none";
}
function displayShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display=" ";//display为空的话会好使，为block会使后边的空间换行
}
function visibilityHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="hidden";
}
function visibilityShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="visible";
}
</script>

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。

值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
marker CSS 中有值marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似<tfoot>）。
table-row 此元素会作为一个表格行显示（类似<tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似<colgroup>）。
table-column 此元素会作为一个单元格列显示（类似<col>）
table-cell 此元素会作为一个表格单元格显示（类似<td> 和<th>）
table-caption 此元素会作为一个表格标题显示（类似<caption>）
inherit 规定应该从父元素继承display 属性的值。

来源：https://www.cnblogs.com/mingforyou/archive/2012/09/05/2672373.html

JQuery DIV 动态隐藏和显示的方法

1. 如果在载入是隐藏：

复制代码
<head>
<script language="javascript">
function HideWeekMonth()
{
$("#tt1").hide();
$("#tt2").hide();
}
</script>
</head>
<body onLoad="HideWeekMonth()">
</body> 
复制代码
使用jquery可以很容易实现显示隐藏的功能，比如要控制div的显示与隐藏，一句话就搞定了，请看下面使用说明。

复制代码
$("#id").show()表示display:block, 
$("#id").hide()表示display:none;
$("#demo").attr("style","display:none;");//隐藏div

$("#demo").attr("style","display:block;");//显示div

$("#demo").css("display","none");//隐藏div

$("#demo").css("display","block");//显示div

复制代码
$("#id").toggle()切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

$("#id").css('display','none'); 
$("#id").css('display','block'); 
jquery判断元素是否隐藏的多种方法
第一种：使用CSS属性

var display =$('#id').css('display');
if(display == 'none'){
   alert("被你发现了，我是隐藏的啦！");
}
 

第二种：使用jquery内置选择器

假设我们页面有这么个标签,

<div id="test">
<p>仅仅是测试所用</p>
</div>

那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:

 
if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了

这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动画,比如:

if($("#test").is(":hidden")){
       $("#test").show();    //如果元素为隐藏,则将它显现
}else{
      $("#test").hide();     //如果元素为显现,则将其隐藏

来源：https://www.cnblogs.com/ryanzheng/p/8910699.html

div设置显示与隐藏、边框等HTML方式

.div 设置隐藏后页面占位/不占位

可直接在页面上做，如下
<div id="hid1" style="visibility:hidden; display:none">
<div id="hid1" style="display:none">隐藏不占位
<div id="hid1" style="visibility:hidden">隐藏占位
visibility:hidden/visible 设置为隐藏/显示(始终占位)
display:none/block 设置为隐藏(不占位)/显示(不占位)


也可以写到css里
用javascript (网上找来的方法)
document.all("idname").style.display="none";


------------------------------------------
CSS/div
1.margin外边距外间距 即div与div间距
2.padding是比较常用CSS样式，可以利用padding内边距设置上、下、左、右对象内容与四个边距距离间隔。
divcss
float浮动用法(left right) Float常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
-------------------------------------------
div 显示与隐藏
visibility隐藏的对象还保留对象显示时所占的物理空间，display则不保留。可以保存下面的代码看看效果：
具体步骤：
代码示例：

<div style="border:1px solid #000;background:#eee">
<span style="width:200;height:200;visibility:hidden"></span>
←SS属性为visibility:hidden的对象
</div><br>
<div style="border:1px solid #000;background:#666">
<span style="width:200;height:200;display:none"></span>
←SS属性为display:none的对象
</div>

特别提示
用visibility属性控制隐藏的对象还占据着它显示时的位置，而display则没有。

特别说明

display属性设置元素的显示方式，对应脚本特性为display，可选值为none、block和inline，各值的说明如下：
none 隐藏元素，不保留元素显示时的空间。
block块方式显示元素。
inline 以内嵌方式显示元素。
inline-block对象显示为内嵌元素，但所有子对象都显示为块元素，相邻的内嵌元素将显示在同一行，允许空格。
list-item 将块元素显示为列表对象，并可以添加项目标点。(需要IE6.0+支持)
table-header-group 将元素作为表格标题组显示，相当于tHead元素。
table-footer-group 将元素作为表格脚注组显示，相当于tFoot元素。
visibility属性设置是否显示元素，对应的脚本特性为visibility，可选值为inherit、hidden和visible，各值的说明如下：
inherit 继承父元素的visibility属性设置。
hidden 隐藏元素，但保留其所占空间。
visible 显示元素(默认值)。

来源：https://blog.csdn.net/ych0108/article/details/84595689