使用onclick改变元素的显示和隐藏

最新推荐文章于 2023-12-28 10:27:55 发布

小酒不會寫代碼

最新推荐文章于 2023-12-28 10:27:55 发布

阅读量1k

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/liuxu3557/article/details/127143512

版权

一、通过使用display改变元素的隐现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    #block{
        /* 设置方块的宽高颜色样式 */
        width: 100px;
        height: 100px;
        background-color: red;
        /* 设置div内部文字样式 */
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        /* 设置文字位置 ,上下左右居中*/
        text-align: center;
        line-height: 100px;
        /* 设置方块隐藏 */
        display: none;
    }
    /* 设置按钮样式 */
    button{
        width: 70px;
        height: 70px;
        background-color: black;
        color: #fff;
        cursor: pointer;
    }
</style>
</head>
<body>
    <!-- 首先设置一个方块 -->
    <div id="block">
        我出现了
    </div>
    <!-- 设置一个触发按钮 -->
    <button id="button">
        按一下
    </button>
    <script> 
    // 获取元素的id
          var showbutton = document.getElementById("button");
          var showblock = document.getElementById("block");
    // 改变元素的display的值
          showbutton.onclick=function(){
            if(showblock.style.display=="none"){
                showblock.style.display="block";
            }else{
                showblock.style.display="none";
            }
          }
          
    </script>
</body>

</html>

这个方法元素会消失不占据标准流中的位置，可以使用position将元素脱标使用

二、通过使用opacity和visbility改变元素的隐现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #block {
            /* 设置方块的宽高颜色样式 */
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置div内部文字样式 */
            font-size: 20px;
            font-weight: 800;
            color: #fff;
            /* 设置文字位置 ,上下左右居中*/
            text-align: center;
            line-height: 100px;
            /* 设置方块隐藏 */
            /* opacity: 0; */
            visibility: hidden;
        }

        /* 设置按钮样式 */
        button {
            width: 70px;
            height: 70px;
            background-color: black;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 首先设置一个方块 -->
    <div id="block">
        我出现了
    </div>
    <!-- 设置一个触发按钮 -->
    <button id="button">
        按一下
    </button>
    <script>
        // 获取元素的id
        var showbutton = document.getElementById("button");
        var showblock = document.getElementById("block");
        // 改变元素的visibility或opacity的值
        //  visibility的方法判断
        showbutton.onclick = function () {
            if (showblock.style.visibility == "hidden") {
                showblock.style.visibility = "visible";
            } else {
                showblock.style.visibility = "hidden";
            }
        }
        //   opacity的方法判断
        //   showbutton.onclick=function(){
        //     if(showblock.style.opacity==0){
        //         showblock.style.opacity=1;
        //     }else{
        //         showblock.style.opacity=0;
        //     }
        //   }

    </script>
</body>

</html>

这两个方法隐藏以后还是占据了在标准流中的位置

三、通过使用overflow改变元素的隐现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #block{
        /* 注:为什么这里要设置宽/高为0因为overflow方法特殊是将元素溢出的隐藏所以将
        宽/高设置为0*可以将所有宽高全部溢出隐藏*/
        width: 0;
        height: 0;
        background-color: red;
        /* 设置div内部文字样式 */
        font-size: 20px;
        font-weight: 800;
        color: #fff;
        /* 设置文字位置 ,上下左右居中*/
        text-align: center;
        line-height: 100px;
        /* 设置方块隐藏 */
        overflow: hidden;
    }
    /* 设置按钮样式 */
    button{
        width: 70px;
        height: 70px;
        background-color: black;
        color: #fff;
        cursor: pointer;
    }
</style>

<body>
    <!-- 首先设置一个方块 -->
    <div id="block">
        我出现了
    </div>
    <!-- 设置一个触发按钮 -->
    <button id="button">
        按一下
    </button>
    <script> 
    // 获取元素的id
          var showbutton = document.getElementById("button");
          var showblock = document.getElementById("block");
    // 改变元素属性宽高值
          showbutton.onclick=function(){
            if(showblock.style.width==0){
                showblock.style.width="100px";
                showblock.style.height="100px";
            }else{
                showblock.style.width=0;
                showblock.style.height=0;
            }
          }
          
    </script>
</body>

</html>

这个方法只能触发一次不建议使用