关于js控制display:none的问题

Posted 2023-03-19

我把一个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" >)，怎么就又可以用了
这是为什么啊，必须写在里面吗？不能写在外面？

因为你的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;

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

还有一种方式是把<script>标签写在html最后面。可以保证最后执行 参考技术B 不会啊，我测试了下都可以直接改变display的值

js控制tr显示和隐藏

很久没有写代码，最近新接了一个项目，开始记录自己开发过程中遇到的一些问题。

关于js控制tr的显示与隐藏

最开始写法是：

<tr id="att" style="display:none;">

<td style="text-align:right;">附件文件：</td>

<td>

            <div id="div_fujian">  

            <div class="input-outer"><input type="file" class="tuiTrim input" name="fujian" size="30" maxlength="15" id="fujian" tabindex="1"/></div>  

        </div>  

        <input type="button" id="btn_add2" value="增加附件" >

        </td>

        </tr>

js方法为：
function setDetailMsgRow(rowID,sel) {
    var row = document.getElementById(rowID); 
      if (row != null) { 
        if (sel.value == 0) { 
        	row.style.display = "block";
        } 
        else { 
        	row.style.display = "none"; 
        } 
    } 
}
但是最后在看效果的时候，发现，会有错位现象发生，如下图

控制显示的tr出现的时候，发生了错位现象，查找原因，如下：

使用display = block 就变成块级元素了，这样的设置会改变页面的格局，这样就会错位；

那么该如何设置，才可以实现js控制tr的显示与隐藏呢，

可以把 display 属性改为 table-row

对于table-row的说明如下图，大家可以学习一下，我是学到了

本文出自 “butcher36” 博客，请务必保留此出处http://butcher36.blog.51cto.com/9315484/1882726