时间戳

首页 > 解决方案 > 显示和隐藏 JavaScript

javascript - 显示和隐藏 JavaScript

问题描述

问题：当我使用 style.display none 时，它​​会拉动所有对象失去它们的位置，并且我的桌子采用其他宽度，我的图形网络通过我的 1-设计而不使用显示和隐藏 在此处输入图像描述 2-当我使用显示和隐藏功能 目标：是解决这个问题，使我的图形按设计固定，而不使用显示和隐藏在此处输入图像描述 在此处输入图像描述

html,body {
    background-image: url('../icones/ain.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.container{
    margin-top: 200px;
}
.table{
    display: inline-block;
    width: 500px;
    margin: 30px;
}
.button12{
    background-color: #60AAEB;
    border:0;
    margin-left:150px
}
.row{
    margin:200px 300px
 }
 .xy{
     background-image: url('../icones/ctb.png');
     background-repeat: no-repeat;
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="css/stylesheet.css" integrity="" crossorigin="anonymous">
    <link rel="stylesheet" href="css/dfirgo.css" integrity="" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>FRIGO</title>
</head>
<body>


    <div class="row" id="rb">
        <?php
        session_start();
        if(empty($_SESSION['prenon'])){
            header("location:index.php");
        }
        else {
        include("php/connexion.php");
        $rec = mysqli_query($conn, "SELECT * FROM espace");

        $i=0;
        while($row=mysqli_fetch_array($rec)) {
              $i++;
            if( $row[2]=='0' && $row[3]=='0'){
                $j=0;
            }else {$j=1;}
            echo"<table class=\"table\">
                <thead class=\"thead-dark\">
                <tr> 
                    <th width='400'><img src=\"icones/neige.png\">ESPACE$i<button class='button12' id='bo$i'onclick=\"myFunction('$i','$j')\"><img  src=\"icones/élément1.png\" ></button> <img id='do$i' src='icones/red.png'style='position: fixed; display:none'><img id='lo$i' src='icones/gren.png'style='position: fixed; display:none'></th>
                </tr>   
                </thead>
                <tbody>
                <tr id=$i style='display:none;'>
                    <td bgcolor='white' >";
                     echo "<div class='xy' >".$row[1]."</div>"." - "."<img src=\"icones/termo.png\">".$row[2]." - <img src=\"icones/water.png\">".$row[3];
                  echo  " </td>
                </tr>

                </tbody>
            </table>";
        }
        }
       ?>

    <script>
        function myFunction(i,j) {
            var l='do'+i;
            var m='lo'+i;
            var x = document.getElementById(i);
            var y = document.getElementById(l);
            var z = document.getElementById(m);
            if(j==='0'){
                y.style.display = "block";
            }
            else {
                z.style.display = "block";
            }
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
                z.style.display = "none";
                y.style.display = "none";
            }
        }
    </script>
<script src="css/popper.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/slim.min.js.js" integrity="" crossorigin="anonymous"></script>
<script src="css/bootstrap.min.js.js" integrity="" crossorigin="anonymous"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

display:none从文档流中移除该元素，并且其他元素的位置将被调整以使用该元素先前占用的空间。

visibility:hidden如果您只是希望元素在不调整布局的情况下出现和消失，则可以使用。

也可以看看：

https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

可见性：隐藏和显示：无有什么区别？

推荐阅读