最近对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>
分享到：
相关推荐
网页中的打字效果是一种常见的动态视觉元素，常用于引人注目或增加互动性。这种效果模拟了人类在实体键盘上打字的过程，字符逐个出现，赋予网页一种动态的、实时的感觉。在HTML中实现这种效果，通常需要结合CSS...
下面将详细介绍两种常见的JavaScript实现级联效果的方法。 方法一：HTML与JavaScript内联事件 1. HTML结构：首先，我们需要创建一个包含多个`<select>`元素的结构，每个`<select>`代表一个级别的选项。 ```html ...
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键，用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
JavaScript作为一种广泛使用的客户端脚本语言，适用于在用户的浏览器上运行，实现动态交互效果。 首先，让我们深入了解一下什么是高亮显示。高亮显示是将特定的文本或单词以不同颜色、背景色或样式呈现，以便在大量...
- 利用CSS的`transition`属性实现图片的平滑过渡，可能需要设置`opacity`和`transform`属性以达到最佳效果。 8. **暂停与恢复**： - 当用户交互时（如鼠标悬停），应暂停自动切换；当交互结束，恢复自动切换。这...
本文将深入探讨如何利用CSS实现超级炫酷的流光按钮效果以及如何在网页中让文字逐个出现，为用户提供更丰富的视觉体验。 首先，我们来讨论如何通过CSS实现流光按钮效果。这种效果通常涉及到CSS3的新特性，如动画...
innerHTML的简单应用
`querySelector()`或`querySelectorAll()`等方法获取元素，然后利用`innerHTML`，`textContent`或`style`属性修改元素内容和样式，如设置字体大小、颜色等，实现放大效果。 2. 事件监听：在JavaScript中，我们可以...
python的xpath没有获取div标签内html内容的功能，也就是获取div或a标签中的innerhtml，写了个小程序实现一下： 源代码 [webadmin@centos7 csdnd4q] #162> vim /mywork/python/csdnd4q/z040.py #去掉最外层标签，...
这篇博客文章（链接已提供但无法直接访问）可能深入探讨了`innerHTML`的工作原理，以及如何在实际编程中有效利用它。博客作者可能讨论了以下知识点： 1. **innerHTML的基本用法**：如何通过`innerHTML`读取和修改...
HTML5全屏API允许网页或应用在不使用传统全屏快捷键F11的情况下，实现全屏效果。开发者可以通过编写JavaScript代码，利用HTML5的全屏API来控制...这些知识点为实现全屏效果的网页和应用提供了技术基础和实现方法。
### 使用JavaScript实现Marquee效果详解 #### 一、引言 在网页设计中，Marquee是一种常见的滚动文本或图像效果，常用于展示新闻头条、广告等动态内容。传统的Marquee效果可以通过HTML `<marquee>` 标签实现，但...
跑马灯效果是一种常见的网页动态展示方式，常用于新闻标题滚动、广告轮播等场景。在JavaScript中实现跑马灯，主要涉及到定时器、数组、DOM操作和CSS样式控制等技术。下面我们将深入探讨如何使用JavaScript来实现这种...
JavaScript 背景时钟实现方法是一种使用 JavaScript 实现时钟背景效果的方法，该方法主要介绍了 JavaScript 背景时钟实现方法，涉及 JavaScript 时间及页面元素样式的相关操作技巧。 时钟显示位置 在该方法中，...
### JavaScript中的innerHTML与innerText的用法与区别 在前端开发中，经常需要用到JavaScript来操作DOM元素，其中`innerHTML`和`innerText`是非常重要的属性，它们分别用于获取或设置元素内部的HTML内容和纯文本...
1. **渐显/渐隐**：通过调整元素的透明度（`opacity`属性）或者改变其高度和宽度，实现文字的渐显和渐隐效果。这通常配合`setTimeout`或`setInterval`函数实现定时变化。 2. **滚动文本**：利用CSS的`transform`...
我们可以设定边框、背景色、字体样式等，甚至通过CSS3的伪类和选择器实现鼠标悬停效果、选中效果等。例如，使用`:hover`伪类可以为鼠标悬停在单元格上时添加特殊样式，`:active`则可以处理单元格被点击时的状态。 ...
本文将详细介绍树形菜单的两种主要实现方式：基于CSS的静态页面和基于Ajax的动态更新。 一、CSS静态页面的树形菜单 1. CSS基础：CSS（层叠样式表）用于控制网页元素的样式和布局。在实现树形菜单时，我们可以通过...
标题 "js 实现网页一个一个字打印出来的效果" 指的是使用JavaScript编程语言来创建一个动态的效果，使得网页上的文本能逐字显示，类似打字机的效果。这种效果可以增强用户交互体验，通常用于讲故事、展示文本或者...