为什么再点击就不会再切换

Question

js为什么这样写点击一次会变，再点击就不会变换了呢，

<input type="button" value="切换" onClick="showHideo()" class="touch_sr_only"/>

<div id="div1"></div>

<script>
function showHideo()
{
    var eDiv=document.getElementById('div1');

    if(eDiv.style.cssText=='top:100px;background:#f60')
    {
        eDiv.style.cssText='top:0px;background:#f90';
    }
    else
    {
        eDiv.style.cssText='top:100px;background:#f60';
    }
}

</script>


<style>
#div1 { position:relative;  width:100px; height:100px; background:#CCC; top:0;}
</style>

Answer 1

您将代码修改如下，您就可以看到为什么点击无效过了，其实第一次点击后，每次点击都会执行到else，不同的浏览器对于cssText这个属性读出来的值都不一样

<input type="button" value="切换" onClick="showHideo()" class="touch_sr_only"/>

<div id="div1"></div>

<script>
function showHideo()
{
    var eDiv=document.getElementById('div1');
    alert(eDiv.style.cssText)
    if(eDiv.style.cssText=='top:100px;background:#f60')
    {
    alert(1)
        eDiv.style.cssText='top:0px;background:#f90';
    }
    else
    {
    alert('2')
        eDiv.style.cssText='top:100px;background:#f60';
    }
}

</script>


<style>
#div1 { position:relative;  width:100px; height:100px; background:#CCC; top:0;}
</style>

如果一定要用js判断，尽量不要用颜色去判断，建议做如下修改

<input type="button" value="切换" onClick="showHideo()" class="touch_sr_only"/>

<div id="div1"></div>

<script>
//静态变量，
var staticStyle = "";
//是否是第一次点击，
var isFirst = true ;
function showHideo()
{
    var eDiv=document.getElementById('div1');

    //第一次点击，原有逻辑
    if(isFirst)
    if(eDiv.style.cssText=='top:100px;background:#f60')
    {
        eDiv.style.cssText='top:0px;background:#f90';
    }
    else
    {
        eDiv.style.cssText='top:100px;background:#f60';
    }
    //后续点击，触发的方法
    if(!isFirst)
    if(eDiv.style.cssText==staticStyle  )
    { 
        eDiv.style.cssText='top:0px;background:#f90';
    }
    else
    { 
        eDiv.style.cssText='top:100px;background:#f60';
    }   
    //此处是第一次点击时，进行修改变量，因为变量在上述代码中使用过，因此需要放到代码最下端，第一次点击后，不会在执行下方代码
    //第一次点击，将‘top:100px;background:#f60’赋值给静态变量，可防止不同浏览器造成的style解析不同的问题
    if (isFirst)
    {
    staticStyle =eDiv.style.cssText; 
    isFirst = false ;
    }
}

</script>


<style>
#div1 { position:relative;  width:100px; height:100px; background:#CCC; top:0;}
</style>

代码修改后，可实现你要的功能，我给您解析一下，在您原有的基础上，添加了两个静态变量，一个是style状态，一个是是否第一次点击，因为您的功能需求是，点击按钮切换style，您的代码中style种类如下：1、原有Style，即Style1 2、第一次点击切换的Style ，即Style2 3、第二次点击切换的Style，即Style3。因此修改后的逻辑是，当您第一次点击时，将Style2赋值给静态变量，并在代码结束时将是否第一次点击变量修改为false，然后第二次点击时，运行新的逻辑，由于不同的浏览器，读取Style的格式不同，因此将style记录到静态变量中，可保证适应多个浏览器，通过当前div的Style与静态变量中的Style对比实现Style2 与Style3中的转换