利用innerHTML实现隐显效果-两种实现方法

最新推荐文章于 2021-06-04 02:54:38 发布

最新推荐文章于 2021-06-04 02:54:38 发布 · 88 阅读

文章标签：

本文介绍如何使用JavaScript实现网页上的隐显效果，通过innerHTML属性改变页面元素，并探讨不同浏览器支持情况。提供两种方法：一是直接修改innerHTML适用于IE浏览器；二是通过CSS display属性控制元素显示隐藏，兼容Firefox等现代浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近对JavaScript非常感兴趣，可能因为是它和JAVA差不多吧。原来看到一些网页上的隐显效果，心理面真是佩服，心想自己能够做就爽了。现在对innerHTML有一点的了解，做这个东西就相对简单了，下面就是我自己弄来玩的一个例子，我相信你看了过后，如果你原来也没有做过，那我保证你说“原来这么简单！！！”：

这里要补充说明一点，就是不同的浏览器对Javascript的支持不同，我这里用了FireFox和微软的浏览器比较了一下，有些能够在微软的浏览器实现效果下，在FireFox下不一能够实现。

<html>
<head>
<title>
</title>
<script>
//这种方式是通过显示条件判定来决定innerHTML的显示内容
//这里显示的内容是原来不存在的。这个方法只支持微软的浏览器
function tClick(id)
{
var str='';
if(id==1)
{
str='<a href=# onclick=t(2)><--</a>';
str+='<br>      ';
str+='1、你好';
str+='<br>      ';
str+='2、欢迎光临';
}
else
{
str='<a href=# onclick=t(1)>--></a>';
}
window.testClick.innerHTML=str;
}
//这种方式通过条件确定，是否把已经存在的东西显示出来。FireFox可以支持该方法，为了程序的移植性，最好选用这一种方式。
function hello(obj,idStr)
{
var d=document.getElementById(idStr);
if(d.style.display=='none')
{
d.style.display='block';
obj.innerHTML='回去';
}
else
{
d.style.display='none';
obj.innerHTML='出来';
}
}
</script>
</head>
<body>
<table>
<tr>
<td id=testClick>
<a href=# onclick=tClick(1)>--></a>
</td>
</tr>
<tr>
<td>
<a href=# onclick=hello(this,'helloddd')>出来</a>
<dd id=helloddd style=display:none>
你好
</dd>
</td>
</tr>
</body>
</html>