html中hidden属性小案例

小李USER

已于 2022-11-26 19:02:24 修改

阅读量1.9k

点赞数 1

分类专栏：待整理文章标签： HTML hidden属性隐藏显示前端开发

于 2022-11-26 18:56:52 首次发布

本文链接：https://blog.csdn.net/m0_59110131/article/details/128055457

版权

待整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

我们给一个div添加hidden属性的时候，只要给div添加hidden属性，无论是否给其属性值，给true，还是给false，抑或是其他值，都会默认把div隐藏起来，所以我们如果想要显示div的时候，就得不要给div设置hidden属性。

只要写上hidden属性值，都默认是true。没有false这一说法。

示例代码：

<body>
    <!-- 
        hidden属性是用来控制div的显示或者隐藏的 
        总结：只要给hidden写上值都是隐藏的
    -->
    <div id="box" style="width: 300px;height: 300px;background-color: green;" hidden></div>
    <div id="box1" style="width: 300px;height: 300px;background-color: pink;" hidden="true"></div>
    <div id="box2" style="width: 300px;height: 300px;background-color: blue;" hidden="false"></div>
    <div id="box3" style="width: 300px;height: 300px;background-color: yellow;" hidden="casual"></div>
    <div id="box4" style="width: 300px;height: 300px;background-color: orange;"></div>
</body>

显示效果：