HTML标签隐藏与显⽰⽅法汇总
传统JS⽅法
<script language="JavaScript">
function displayHideUI()
{
var ui = ElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui = ElementById("bbs");
ui.style.display=" ";//display为空的话会好使，为block会使后边的空间换⾏
}
function visibilityHideUI()
{
var ui = ElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui = ElementById("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 属性的值。
JQuery DIV 动态隐藏和显⽰的⽅法
1. 如果在载⼊是隐藏：
复制代码
<head>
<script language="javascript">
function HideWeekMonth()
{
$("#tt1").hide();
$("#tt2").hide();
}
</script>
</head>
<body onLoad="HideWeekMonth()">
</body>
复制代码
使⽤jquery可以很容易实现显⽰隐藏的功能，⽐如要控制div的显⽰与隐藏，⼀句话就搞定了，请看下⾯使⽤说明。
jquery是什么选择器复制代码
$("#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();    //如果元素为显现，则将其隐藏
div设置显⽰与隐藏、边框等HTML⽅式
.div 设置隐藏后页⾯占位/不占位
可直接在页⾯上做，如下
<div id="hid1" >
<div id="hid1" >隐藏不占位
<div id="hid1" >隐藏占位
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 >
<span ></span>
←SS属性为visibility:hidden的对象
</div><br>
<div >
<span ></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 显⽰元素(默认值)。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。