当前位置:编程学习 > JS >>

如何动态改变div span的内容

先看一个实例

对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="http://www.zzzyk.com" onclick="chagespan(1)">改变值为1</a>
<a href="http://www.zzzyk.com" onclick="chagespan(2)">改变值为2</a>

  当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“span行测试”和“默认值”是在同一行显示的,跟div不一样。

  另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的。

空格处理

当在div中输入"a[任意个空格]a" html呈现在chrome和ie下是一样的:只显示一个空格。

innerhtml属性

ie还是两个a加一个空格,
chrome则是原始输入的样子。
回车

当在div中输入"a[回车][任意个空格]a"时,html呈现chrome和ie是一样的。

innerhtml属性

ie是3个字符,在两个a中间加了个空格。
chrome则是原始输入的样子,将回车解析为n。
html标记

当在div中输入"a<br>a" html呈现在chrome和ie下是一样的。

innerhtml属性

ie中是a<br>a,将html标记大写了!
chrome是a<br>a,将html标记小写
textarea中回车

在textarea多行输入框中输入a[回车]b,html呈现chrome和ie是一样的。

value属性

ie是4个字符,内容为:arnb
chrome是3个字符,内容为:anb

<script type="text/网页特效">
function changetext(){
document.getelementbyid('boldstuff').innerhtml = 'fred flinstone';
}
</script>
<p>welcome to the site <b id='boldstuff'>dude</b> </p>
<input type='button' onclick='changetext()' value='change text'/>

对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="http://www.zzzyk.com/" onclick="chagediv(1)">改变值为1</a>
<a href="http://www.zzzyk.com/" onclick="chagediv(2)">改变值为2</a>

补充:网页制作,js教程 
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,