- 浏览: 50379 次
- 性别:
- 来自: 合肥
文章分类
最新评论
使用innerHTML属性来控制DIV和SPAN<$log_hiddenIcon$>
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。
比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。
(1)对div标签的控制
div标签跟span标签是不一样的,div是一个层的块,span是一行,我们下面看演示就知道区别了。先来看一段控制div的代码。
<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}
</script>
DIV块测试:<div id="div1">默认值</div>
<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</a>
运行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,但是注意其中的界面,就是会发现“DIV测试:”和“默认值”是两行显示的,因为DIV是按块来显示的。
(2)对span的控制
与div类似,但是它是按照行来显示的,看下面的代码:
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}
</script>
Span行测试:
<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>
当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“Span行测试”和“默认值”是在同一行显示的,跟DIV不一样。
另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的.
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。
比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。
(1)对div标签的控制
div标签跟span标签是不一样的,div是一个层的块,span是一行,我们下面看演示就知道区别了。先来看一段控制div的代码。
<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}
</script>
DIV块测试:<div id="div1">默认值</div>
<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</a>
运行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,但是注意其中的界面,就是会发现“DIV测试:”和“默认值”是两行显示的,因为DIV是按块来显示的。
(2)对span的控制
与div类似,但是它是按照行来显示的,看下面的代码:
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}
</script>
Span行测试:
<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>
当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“Span行测试”和“默认值”是在同一行显示的,跟DIV不一样。
另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的.
发表评论
-
oracle 笔记下
2011-07-06 18:17 785建立表空间:建立表空 ... -
oracle 学习笔记上
2011-06-20 19:00 10851.oracle 安装完成后,会 ... -
jquery 对select中的option操作
2011-06-15 16:28 6260Jquery的功能很强大,下面 ... -
MySQL实现分页技术
2011-06-09 08:29 901先给出servlet package com.ourchr.s ... -
servlet cookie jsp
2011-05-19 18:21 914首先是登陆界面,其中有mes_zh等国际化 这个不重要 < ... -
java学习日记(线程)
2011-05-18 18:38 812java学习日记(线程) 一 ... -
Java Servlet和JSP 处理Cookie
2011-05-18 13:28 19499.1 Cookie概述 Cookie是服务器发送给浏 ... -
简单的qq实现
2011-05-17 18:42 731很好用 简洁 -
简单的日历控件
2011-05-17 18:40 793package Exception; import java ... -
完整的JDBC 简单列子
2011-05-17 18:38 688package dao; import java.sql.Co ... -
jsp jstl 标签3
2011-05-13 17:38 695<c:import> 作用:导入一个url的资源, ... -
jsp jstl 标签2
2011-05-13 17:38 741c:forEach 用于循环的<c:forEach&g ... -
jsp jstl 标签1
2011-05-13 17:36 1190一、引入包: jstl.jar (1 ... -
js 中this用发小结
2011-03-09 09:19 701js中this的总结 在面向对 ... -
js 正则表达式
2011-02-24 15:12 631js正则表达式 exec 方法 用正则表达式模式在字符串中运 ... -
Myeclipse 快捷键打总结
2011-01-08 13:01 726xml、jsp、jsf、js等等,我们没有必要全部都去自动校验 ... -
java基础知识
2011-01-07 17:35 693 -
java文件夹之间的复制
2011-01-06 14:58 655package Exception; import java. ...
相关推荐
在这个例子中,`innerHTML` 返回了 `<div id="test">` 元素中的所有 HTML 内容,包括 `<span>` 标签及其样式。 #### 使用场景 - 动态修改页面内容。 - 渲染数据到页面上,如展示用户评论等动态数据。 ### `...
JS打印WEB页面与打印预览是指在WEB页面中使用JavaScript语言来实现页面的打印和预览功能。以下是实现这个功能的三种方法: 第一种方法:使用CSS隐藏不打印内容 在这个方法中,我们可以使用CSS来隐藏不需要打印的...
函数会将指定ID的元素(如`div1`和`div2`)的innerHTML合并,并调用`window.print()`来启动打印操作。 HTML部分: ```html <span id='div1'>打印内容</span> ()" target="_self">打印 ``` JavaScript部分: ...
innerText 和 innerHTML 是在Web开发中用于操作HTML元素内文本内容的两个重要属性,它们各自具有独特的特性和用途。在JavaScript或DOM编程中,理解这两个属性的区别和应用场景至关重要。 innerText 属性主要用于...
4. HTML中的`SPAN`和`DIV`的区别,`SPAN`用于行内元素,而`DIV`用于块级元素。 5. 使用jQuery向`div`添加HTML文本内容的简便方法。 6. jQuery加载HTML页面到指定`div`的实现。 7. 避免在HTML中滥用`div`,以保持代码...
在实际的Web开发中,考虑到浏览器兼容性和性能,开发者应当谨慎选择`innerText`或`innerHTML`。在需要获取纯文本内容且不关心HTML结构时,应优先考虑`innerText`或跨浏览器兼容的`textContent`。而当需要操作HTML...
接着,我们需要在HTML中创建一个元素来显示时间,这通常是一个`<div>`或`<span>`元素。我们可以给这个元素一个ID,以便在JavaScript中轻松找到它。例如,我们可以定义一个id为"clock"的`<div>`: ```html <div id=...
<span id='div1'>把要打印的内容放这里</span> function printit(MyDiv) { if (confirm('确定打印吗?')) { var newstr = document.getElementById(MyDiv).innerHTML; var oldstr = document.body.innerHTML; ...
JavaScript是Web开发中不可或缺的一部分,尤其在处理表单和用户交互方面。在PPT课件中,主要讨论了两个核心概念:`innerHTML`属性和表单的验证。 `innerHTML`属性是JavaScript中用于操作HTML元素内容的一个关键特性...
实验通过让用户输入希望添加的span标签数量和需要显示的文本,然后分别调用 `AppendDiv()`、`InnerHTML()` 和 `Join()` 函数,并通过记录操作前后的时间差,来评估性能。结果显示,在添加大量元素到DOM时,使用 `...
如果只想打印页面中的某个特定div,可以将要打印的内容放入一个`<span>`或`<div>`标签中,然后编写一个JavaScript函数来提取并打印这些内容。以下是一个示例: ```html <span id="div1">把要打印的内容放这里</span...
<div id="countdown">距离春节还有: <span id="days"></span>天<span id="hours"></span>小时<span id="minutes"></span>分钟<span id="seconds"></span>秒</div> ``` 接着,CSS(Cascading Style Sheets)负责美化...
【DOM操作】:修改`<body>`的`innerHTML`会替换整个页面内容,而修改`<div>`的`innerHTML`仅替换该`div`的内容。 【闭包】:闭包是一种功能强大的机制,它允许函数访问并操作其外部作用域的变量,即使在其外部作用...
XML数据源对象(DSO)是互联网技术中用于处理和展现XML数据的一种机制,特别是在早期Web开发中广泛使用。数据岛(Data Island)是DSO的核心概念,它是XML数据与HTML页面相结合的形式,使得XML数据可以直接在HTML文档...
还可以通过CSS3的过渡和动画属性来改进效果,或者引入Web Workers以减轻主线程的负担,提高性能。 总的来说,“HTML特效——黑客帝国效果”是将HTML、CSS与JavaScript结合起来创造动态视觉体验的一个实例,展示了...
在示例`<span id="outer"><span id="inner">text</span></span>`中,`document.getElementById("outer").innerHTML`将返回`<span id="inner">text</span>`,`document.getElementById("inner").innerHTML`将返回`...
<div class="boxheader-text"><span class="b">显示窗体</span></div> </div> <div class="btnright"> ('buy');">关闭"/> </div> </div> </div> <div class="modalbody"> 希望能大家多多交流! </div> </...
2. `span`标签:分别用于显示年、月、日、小时、分钟和秒的数值。 例如: ```html <div id="countdown"> <span id="years"></span>年 <span id="months"></span>月 <span id="days"></span>天 <span id="hours...
5. **数据绑定和框架**:在现代Web开发中,很多项目会使用如React、Vue或Angular等前端框架。这些框架提供了数据绑定功能,可以轻松地根据数据变化更新视图,实现关键字飘红。 ```jsx import React from 'react'; ...