JS 结点（属性操作）隐藏与显示（display）

JS 结点（属性操作）隐藏与显示（display）：

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

<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>

值                描述
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 属性的值。

<script language="JavaScript"><!-- function changeShowImage(n){  var cNodes = document.getElementsByClassName("mediumn_image");  console.log("22222");  console.log(cNodes);  for(var i=0;i<cNodes.length;i++){   console.log(cNodes[i]);   cNodes[i].style.display = "none";  }  var nNode = document.getElementById(n);  nNode.style.display = ""; }//--> </script>

 

接口

nodeType常量

nodeType值

备注

Element

Node.ELEMENT_NODE

1

元素节点

Text

Node.TEXT_NODE

3

文本节点

Document

Node.DOCUMENT_NODE

9

document

Comment

Node.COMMENT_NODE

8

注释的文本

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

11

document片断

Attr

Node.ATTRIBUTE_NODE

2

节点属性

 

 

方法

描述

createAttribute()

用指定的名字创建新的Attr节点。

createComment()

用指定的字符串创建新的Comment节点。

createElement()

用指定的标记名创建新的Element节点。

createTextNode()

用指定的文本创建新的TextNode节点。

getElementById()

返回文档中具有指定id属性的Element节点。

getElementsByTagName()

返回文档中具有指定标记名的所有Element节点。

 

属性

描述

attributes

如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。

childNodes

以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。

firstChild

以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。

lastChild

以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。

nextSibling

以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点

nodeName

节点的名字，Element节点则代表Element的标记名称。

nodeType

代表节点的类型。

parentNode

以Node的形式返回当前节点的父节点。如果没有父节点，则为null。

previousSibling

以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

 

方法

描述

appendChild()

通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。

cloneNode()

复制当前节点，或者复制当前节点以及它的所有子孙节点。

hasChildNodes()

如果当前节点拥有子节点，则将返回true。

insertBefore()

给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。

removeChild()

从文档树中删除并返回指定的子节点。

replaceChild()

从文档树中删除并返回指定的子节点，用另一个节点替换它。

=====================================

app:

在jsp中：

<div id="top">
<div class="top_logo">
<img src="<%=basePath%>/WEB-FILE/img/logo2.png" />
</div>

<div class="top_menu">
<table id="top_right_tb" border="0" cellpadding="0" cellspacing="0"style="font-family: 微软雅黑">
<tr>
<td><a class="cur" href="#javascript:;">首页</a></td>
<td><a href="#javascript:;">社区</a></td>
<td><a href="#javascript:;">用户权益</a></td>
<td><a href="#javascript:;"></a></td>
<td><a href="#javascript:;">关于直播</a></td>
<td><a href="#javascript:;">联系我们</a></td>
<td><a href="http://aroundme.tv/Account/Login">圈主登录</a></td>
<td id="downA">下载
</tr>
</table>
</div>

<div id="downapp">
<dl>
<dd>
<img src="<%=basePath%>/WEB-FILE/img/downewm.png" />
</dd>
<dd>圈子</dd>
<dd>
<hr>
</dd>
<dd>
<a href="https://itunes.apple.com/us/app/bang-bang-bang-lin-li-zhi/id1165251427?l=zh&amp;ls=1&amp;mt=8"><b>IOS下载</b></a>
</dd>
<dd>
<hr>
</dd>
<dd>
<a href="https://www.aroundme.tv/AppDown/AroundMe2.0.5_release.apk"><b>安卓下载</b></a>
</dd>
</dl>
</div>
</div> 

在js中这样调用：

//显示和隐藏下载下拉框

$(function() {
$("#downA").click(function(){
 var sbtitle=document.getElementById("downapp");  
 if(sbtitle){  
    if(sbtitle.style.display=='block'){  
    $("#downA").css("color","#000");
    sbtitle.style.display='none';  
    }else{  
    $("#downA").css("color","red");
    sbtitle.style.display='block';  
    }  
 }  
});

$("#downA").mouseout(function(){
$("#downA").css("color","#000");
});

$("#downA").mouseover(function(){
$("#downA").css("color","red");
});

})