您的位置：首页 > Web前端 > JavaScript

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

2010-01-13 16:15 756 查看

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



</script>

<style
type="text/css">



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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航