js点击切换样式

[zzhao1979]

默认样式

<span class="search1" title="点击切换" style="margin-top: 0px; "></span>
  	   <input type="text" class="search2" placeholder="搜索会员..." value="" name="Name" id="Name">

点击切换后

<span class="search1" title="点击切换" style="margin-top: -26px; "></span>
           <input type="text" class="search2" placeholder="搜索文章..." value="" name="News" id="News">

不懂JS，有懂的大侠请出手，两个样式和input实现点击切换，谢谢大家

[warmersen]

没看明白...

[泡泡鱼_]

<span class="search1" title="点击切换" onclick="this.style.marginTop='-26px';" style=" position:absolute;margin-top: 0px;"></span>

不知道你说的“两个样式和input实现点击切换”具体是啥意思。你想更改span的margin-top属性就使用上面的方法

[zzhao1979]

谢谢4楼的回答，基本达到 了我想要的效果
但是点击时是直接切换，没有过渡

希望能完善一下，加上向上或向下滑动的过渡效果

[zzhao1979]

鼠标点击后将margin-top: 0px;切换为margin-top: -26px;

搜索会员...切换为搜索文章...

Name切换为News

[泡泡鱼_]

注意：我将你原来的id="Name"改成了id="name"

<script type="text/javascript">
function ChangeAttr(o){
    var n=document.getElementById("name")||document.getElementById("news");
    var json=n.id=='name'?{margintop:'-26px',id:'news',placeholder:'搜索文章...'}:{margintop:'0px',id:'name',placeholder:'搜索会员...'};
    o.style.marginTop=json.margintop;
    n.setAttribute("placeholder",json.placeholder);
    n.id=json.id;
}
</script>
<span class="search1" title="点击切换" onclick="ChangeAttr(this)" style="margin-top: 0px;">aaaaa</span>
<input type="text" class="search2" placeholder="搜索会员..." value="" name="Name" id="name">