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

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>

您将代码修改如下，您就可以看到为什么点击无效过了，其实第一次点击后，每次点击都会执行到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中的转换

因为颜色的代码转成了background: rgb(255, 102, 0);而不是background:#f60
如果你想点击切换颜色，我建议你在style中定义好两个背景色,然后通过切换class来变色

你在第一行console控制台输出一下，你这样判断写法不合理，你可以用class属性替换，也能实现这样的功能。

条件判断问题，一直是false。颜色值是rgb表示，判断肯定一直是false

#xxxxxx格式的颜色值获取的时候会被转为rgb格式的，不是#xxxxxx这种格式了，除非你是颜色名称，如black，red。blue才不会变

而且注意cssText获取不到级联样式表中的内容，只能获取dom style里面的样式，有些浏览器还会自动补充一些样式的默认属性值，如firefox background会补全repeat等属性，所以你直接对比cssText会有bug

最好的办法就是用class属性定义两个样式来切换，或者直接依据top属性值（这个不会变为其他格式或者乱补充什么默认属性），改下面就好了

    function showHideo() {
        var eDiv = document.getElementById('div1');alert(eDiv.style.cssText)
        if (eDiv.style.top == '100px') {
            eDiv.style.cssText = 'top:0px;background:white';
        }
        else {
            eDiv.style.cssText = 'top:100px;background:blue';
        }
    }

改为onchenge

目测条件判断有问题，估计一直是false。console.log('输出看下')