现在的位置: 首页 > 综合 > 正文

javascript 控制 DIV等html元素的显示和隐藏

2013年07月10日 ⁄ 综合 ⁄ 共 2907字 ⁄ 字号 评论关闭

1

、编写
js

函数

<script
type="text/javascript">
    function display(id){

        var
traget=document.getElementById(id);
        
if(traget.style.display=="none"){
                
traget.style.display="";
         }else{
                
traget.style.display="none";
       }
   
}
</script>

2.、

要显示
/

隐藏的
html

元素加上
id


属性

<table>

     <tr id="menu"
>   

        <td>

控制这个
tr

的显示
/

隐藏
</td>

    </tr>

</table>

3

、添加按钮,链接等触发
js


函数

<input type="button"

onclick="display(

'menu'

)"

  
value="

显示
/

隐藏
"/>

<a href="#"  
onclick="display(

'menu'

)"

  
>

显示
/

隐藏
</a>



javascript

显示隐藏层

<div id=""
style="display:none;">


广告
</div>
<input type="botton"
onclick="


函数
">
<script
language=javascript>
function


函数
{
if(thisdiv.style.display=='none'){

thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}
</script>

你先给
div


取个
ID=“AA”thisdiv=AA



javascript


隐藏

/


显示表单对象




<SCRIPT
language=javascript>
function expandIt(el) {
      whichEl
=document.getElementById(el)
      if (whichEl.style.display ==    'none')
{
       whichEl.style.display    = '';
      }
      else {
      
whichEl.style.display    = 'none';
      }
     
}
</SCRIPT>

el

是对象的
id

,不管是
tr

或者
table

等等先设置一下
id

,然后进行调用。

例:

<a onclick="expandIt('ttchild'); return
false" href="#" >try it</a>

<tr id="ttchild"><td
width="18">Example</td></tr>



javascript

控制页面控件隐藏显示的两种方法

方法的不同之处在于控件隐藏后是否还在页面上占位:

div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白;

通过设置display属性可以使div隐藏后释放占用的页面空间。



方法一:
document.all<"PanelSMS">.style.visibility="hidden";

document.all<"PanelSMS">.style.visibility="visible";

方法二:
document.all<"PanelSMS">.style.display="none";

document.all<"PanelSMS">.style.display="inline";

 

【[HTML]显示/隐藏DIV的技巧(visibility与display的差别)】------------------

      【style="visibility: none;"
  document.getElementById("typediv1").style.visibility="hidden";//隐藏
  document.getElementById("typediv1").style.visibility="visible";//显示】

  【style="display: none;"
  document.getElementById("typediv1").style.display="none";//隐藏
  document.getElementById("typediv1").style.display="";//显示】

 

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a
href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank"
rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html
xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank"
rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<title>jexm's blog</title>
<script
language="JavaScript" type="text/JavaScript">
<!--
function
show(targetid){
    if (document.getElementById){
       
target=document.getElementById(targetid);
            if
(target.style.display=="block"){
               
target.style.display="none";
               
newsInfo.style.height="1528px"
            } else {
               
target.style.display="block";
               
newsInfo.style.height="1583px"
            }
   
}
}
-->
</script>
<style
type="text/css">
<!--
#test1{
display:none;
}
-->
</style>
</head>
<body>
<input
name="niming" type="checkbox" onclick="show('test1')" checked >
显示与否
<div id="test1"><img src="/logo.gif" border="0"
align="absmiddle" /></div>
</body>
</html>

抱歉!评论已关闭.