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

最新推荐文章于 2024-03-06 09:53:52 发布

Luders

最新推荐文章于 2024-03-06 09:53:52 发布

阅读量1.2k

点赞数

文章标签： javascript xhtml ViewUI

1 、编写 js 函数

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

2.、要显示 / 隐藏的 html 元素加上 id 属性

<table>

</tr>

</table>

3 、添加按钮，链接等触发 js 函数

javascript 显示隐藏层

<div id="" style="display:none;"> 广告 </div>
<input type="botton" οnclick=" 函数 ">
<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 ，然后进行调用。

例：

<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" οnclick="show('test1')" checked > 显示与否
<div id="test1"><img src="/logo.gif" border="0" align="absmiddle" /></div>
</body>
</html>