html元素隐藏不改变结构,DOM问题：点击按钮的时候，修改input元素的value属性值，为什么在HTML结构上没有变化？...

代码：

无标题文档

span{background:lime;}

window.οnlοad=function(){

//获取input、span

var oTxt=document.getElementsByTagName('input')[0];

var oBtn=document.getElementsByTagName('span')[0];

//span在点击的时候，修改input的value值，

//且给input加一个类“on”

oBtn.οnclick=function(){

oTxt.value=10;

oTxt.className='on';

};

};

onclick

未点击onclick时，input元素的状态(下图)：

点击onclick，修改input的value属性，并且加个class，名为“on”。此时input元素的状态(下图)：

**input元素的class=“on”，oTxt.className='on';语句生效。

input元素的value=“哈哈”没有发生变化，但是页面显示中，value已经是10。都是修改input的属性，请问为什么className能在HTML中有所体现，而value却仅仅在页面中发生变化呢？谢谢！**