Question

关于js控制display:none的问题

我把一个div的display:none放在其外联样式表里，但是用js控制时，如果点击
if(login.style.display=="none"){
login.style.display="block";
}else{
login.style.display="none";
}
每一次点击不会把display变成block;而是再创建一次display:none;
但是当我把display:none直接放在div的属性里时(<div style="display:none" >)，怎么就又可以用了
这是为什么啊，必须写在里面吗？不能写在外面？

Answer 1

因为你的if else依次执行了

当你if条件ok的时候 login的style设置为block，此时，else条件又成立，所以依次执行，回到原点。

方法1：
使用jquery的toggle切换函数
<div id='login'>login</div>

$("#login").toggle( 
  function () {
    $(this).show();
  },
  function () {
    $(this).hide();
  }
);

方法2：原始方法
设置全局标记位
var flag = false;

if(flag){
 login.style.display="block";
 flag=false;
}
else{
 login.style.display="none";
 flag=true;
}

Answer 2

如果没有把你的 js 写在 window.onload = function() { // your js }; 内，你就要注意css和js的先后顺序了，如果css靠后，js就会新建这个样式属性

还有一种方式是把<script>标签写在html最后面。可以保证最后执行

Answer 3

不会啊，我测试了下都可以直接改变display的值