为什么再点击就不会再切换
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:#fff';
}
else
{
eDiv.style.cssText='top:100px;background:#f60';
}
}
</script>
<style>
#div1 { position:relative; width:100px; height:100px; background:#CCC; top:0;}
</style>
这10分你必须得给我
PS：先引入jQuery包，百度一个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>echarts.js中国地图省份悬浮提示</title>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
</head>
<body>
<div id="container" style="height: 800px;width:1200px;background:white;margin:20px 0 0;"></div>
<input type="button" value="切换" onClick="showHideo()" class="touch_sr_only"/>
<div id="div1">打打杀杀大大</div>
<script type="text/javascript">
var eDiv=document.getElementById('div1');
eDiv.style.backgroundColor="#003366";
var flag = true;
function showHideo()
{
if(flag)
{
eDiv.style.backgroundColor="red";
flag = false;
}
else
{
eDiv.style.backgroundColor="#003366";
flag = true;
}
}
</script>
</body>
</html>
因为你第一次点的时候，cssText是空，进入了else。
第二次点的时候cssText就是top: 100px; background: rgb(255, 102, 0);了
显然，并不等于top:100px;background:#f60。
你可以在var eDiv=document.getElementById('div1');下面一行输入alert(eDiv.style.cssText)看看结果
其实你js判断哪里要修改下，下面是我修改过的，你可以去试试
function showHideo() {
var eDiv = document.getElementById('div1');
if (eDiv.style.cssText == 'top: 100px; background: rgb(255, 102, 0);') {
eDiv.style.cssText = 'top:0px;background:#fff';
}
else {
eDiv.style.cssText = 'top:100px;background:#f60';
}
}
像这些js问题，你可以debugger在浏览器里面调试然后修改
您将代码修改如下，您就可以看到为什么点击无效过了，其实第一次点击后，每次点击都会执行到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:#fff';
}
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:#fff';
}
else
{
eDiv.style.cssText='top:100px;background:#f60';
}
//后续点击，触发的方法
if(!isFirst)
if(eDiv.style.cssText==staticStyle )
{
eDiv.style.cssText='top:0px;background:#fff';
}
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中的转换