使用innerHTML属性来控制DIV和SPAN<$log_hiddenIcon$>
2013-07-31 21:31
806 查看
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用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来定义的. |
相关文章推荐
- 使用css制作三角,兼容IE6,用到的标签&lt;div&gt;&lt;s&gt;&lt;span&gt;
- 简单运用Javascript,使<input/>控制display属性div的显示隐藏
- (礼拜一log)前端开发:<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
- HTML使用<span>和<div>布局中遇到的问题
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- 如何用js控制<span>的class属性
- autocomplete 属性在html <input autocomplete="on|off">中的使用
- HTML <div> 和 <span>
- html从入门到放弃(7)-入门标签:块元素与内联元素<div/>和<span/>
- <Linux+qt>设置使用键盘控制事件响应
- 关于<span>的属性设置
- 在AndroidManifest.xml文件中<activity>的android:windowSoftInputMode属性使用
- <HeadFirst_HTML与CSS> O'REILLY_Chap.10_div与span
- .Net Core中使用ref和Span<T>提高程序性能
- text-overflow使用文字超多div的宽度或超过在table中<td>
- ECSIDE标签之<ec:table>标签的属性说明与使用
- 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹
- HTML——<div>、<span><p>、<br>以及<span>之间的关系
- 使用<frameset><frame/><frame/></frameset> 布局页面 (div+css布局 和frameset布局,两种并列策略)