文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>javascript 控制 html元素 显示/隐藏

javascript 控制 html元素 显示/隐藏

时间:2010-08-31  来源:moneymuch

javascript 控制 html元素 显示/隐藏

javascript 控制 html元素 显示/隐藏

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隐藏/显示表单对象

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控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["PanelSMS"].style.visibility="hidden";
document.all["PanelSMS"].style.visibility="visible";
方法二:
document.all["PanelSMS"].style.display="none";
document.all["PanelSMS"].style.display="inline";
方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static
方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic

[quote]

<a href="#" onclick="document.getElementById(this.id+'src').style.display=document.getElementById (this.id+'src').style.display=='block'?'none':'block';this.innerText=this.innerText =='显示'?'隐藏':'显示';return false;" id="els" title="显示内容">隐藏</a><br>
<span id="elssrc" style="display:'block'">
<pre><p>
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
一二三四五六七八九十
</p></pre>
</span>
<pre><p>
效果就是这样了
效果就是这样了
效果就是这样了

效果就是这样了
效果就是这样了
</p></pre>

[/quote]

http://wcl365.blog.163.com/blog/static/1306934222010528111334624/
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载