html在线编辑器

<!DOCTYPE html>
<html>
<head>
    <style>
        .imgbox {
            float: left;
            text-align: center;
            width: 120px;
            border: 1px solid gray;
            margin: 4px;
            padding: 6px;
        }

        button {
            width: 100%;
        }
    </style>
</head>
<body>

    <h3>display:none;和visibility:hidden;之间的差异.</h3>
    <p><strong>visibility:hidden</strong>隐藏元素,但是它任然占用布局空间.</p>
    <p><strong>display:none</strong>从文档里移除元素.它不占用任何空间.</p>

    <div class="imgbox" id="imgbox1">
        Box 1<br>
        <img src="/public/images/example_one.jpg" alt="Italy" style="width:100%">
        <button onclick="removeElement()">移除</button>
    </div>

    <div class="imgbox" id="imgbox2">
        Box 2<br>
        <img src="/public/images/example_png_one.png" alt="Lights" style="width:100%">
        <button onclick="changeVisibility()">隐藏</button>
    </div>

    <div class="imgbox">
        Box 3<br>
        <img src="/public/images/example_gif_one.gif" alt="Forest" style="width:100%">
        <button onclick="resetElement()">重置</button>
    </div>

    <script>
function removeElement() {
  document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
  document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
  document.getElementById("imgbox1").style.display = "block";
  document.getElementById("imgbox2").style.visibility = "visible";
}
    </script>

</body>
</html>
评论区

()