本文章為你收藏了三款關於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 ) );
}
方法二
<html>
<head>
<meta HTTP-equiv="content-type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<mce:script language="網頁特效" type="text/javascript"><!--
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<aaa.length;i++)
{
if (aaa[i].checked==true)
{
s+=aaa[i].value;
}
}
} else
{
target.style.display="block";
}
}
}
// --></mce:script>
<mce:style type="text/css"><!--
#div1{
height:400px;
width:400px;
display:none;
}
--></mce:style><style type="text/css" mce_bogus="1">
#div1{
height:400px;
width:400px;
display:none;
}</style>
</head>
<body>
<input type="button" id="butn" value="顯示/隱藏" onclick="toggle('div1')" />
<center>
<div id="div1" style="filter:Alpha(opacity=100); position:absolute; overflow:auto;height:160; top:100px2008-5-26;left:300px;width:100px; ">
隱藏的div
</div></center>
居中的div
</body>
</html>
方法三
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
