js点击切换样式

默认样式
<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实现点击切换，谢谢大家

解决方案 »

  1.   

    <span class="search1" title="点击切换" onclick="this.style.marginTop='-26px';" style=" position:absolute;margin-top: 0px;"></span>不知道你说的“两个样式和input实现点击切换”具体是啥意思。你想更改span的margin-top属性就使用上面的方法
      

  2.   

    鼠标点击后将margin-top: 0px;切换为margin-top: -26px;搜索会员...切换为搜索文章...Name切换为News
      

  3.   

    注意：我将你原来的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">