js控制顯示和隱藏 css div代碼

來源:互聯網
上載者:User
關鍵字 網頁製作 Ajax JavaScript

本文章為你收藏了三款關於js控制顯示和隱藏 css教程 div代碼哦,如果你正在做顯示與隱藏層的效果,這裡有jquery與js控制方法哦。

function showtips教程( tips, height, time ){
var windowwidth = document.documentelement.clientwidth;
var tipsdiv = '<div class="tipsclass">' + tips + '</div>';

$( 'body' ).append( tipsdiv );
$( 'div.tipsclass' ).css({
'top' : height + 'px',
'left' : ( windowwidth / 2 ) - ( tips.length * 13 / 2 ) + 'px',
'position' : 'absolute',
'padding' : '3px 5px',
'background': '#8fbc8f',
'font-size' : 12 + 'px',
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'opacity' : '0.8'
}).show();
settimeout( function(){$( 'div.tipsclass' ).fadeout();}, ( time * 1000 ) );
}
方法二

&lt;html&gt;  


&lt;head&gt;  


&lt;meta HTTP-equiv="content-type" content="text/html; charset=gb2312" /&gt;  


&lt;title&gt;無標題文檔&lt;/title&gt;  


&lt;mce:script language="網頁特效" type="text/javascript"&gt;&lt;!--


   


function toggle(targetid){   


    if (document.getelementbyid)   


 {   


        target=document.getelementbyid(targetid);   


            if (target.style.display=="block")   


   {   


               target.style.display="none";   


              var aaa  =document.all("aa");   


var s='';   


               for(var i=0;i&lt;aaa.length;i++)   


               {   


                 if (aaa[i].checked==true)   


                 {   


         s+=aaa[i].value;   


                 }   


            }   


} else    


    {   


                target.style.display="block";   


             }   


     }   


}


// --&gt;&lt;/mce:script&gt;  


&lt;mce:style type="text/css"&gt;&lt;!--


   


#div1{   


height:400px;   


width:400px;   


display:none;   


}


--&gt;&lt;/mce:style&gt;&lt;style type="text/css" mce_bogus="1"&gt;   


#div1{   


height:400px;   


width:400px;   


display:none;   


}&lt;/style&gt;  


&lt;/head&gt;  


&lt;body&gt;  


&lt;input type="button" id="butn" value="顯示/隱藏" onclick="toggle('div1')" /&gt;  


&lt;center&gt;  


&lt;div id="div1"  style="filter:Alpha(opacity=100); position:absolute; overflow:auto;height:160;  top:100px2008-5-26;left:300px;width:100px; "&gt;  


隱藏的div   


&lt;/div&gt;&lt;/center&gt;  


居中的div   


&lt;/body&gt;  


&lt;/html&gt; 


方法三

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.