如何利用javascript完成对网页css的修改从而实现简单的特效

.text2{

width:10%;

height:60%;

margin:9px;

border:black solid thin;

float:left;

font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

font-weight: 300;

font-size: 0.9em;

}

<script>

function bchange(obj){

obj.value="";

obj.style.width="30%";

obj.style.border = "blue solid thin"

}

function achange(obj){

if(!obj.value){

obj.value="请输入要搜索的内容";

obj.style.width="10%";

obj.style.border = "black solid thin";}

}

</script>

<div id="shang">

<input type="text" class="text2" value="请输入要搜索的内容" onfocus=bchange(this) onblur=achange(this) id="active">

</div>

以上代码即可实现一个一个input框的动态拉伸和和边框颜色的变化，但是要注意在改变<input>中css样式时要使用this.syle.(...) = " ...";来进行更改其。欢迎大神。