JS通过操作Element的Css来实现隐藏和显示（本示例只有隐藏）

最新推荐文章于 2023-12-02 22:56:37 发布

u013131203

最新推荐文章于 2023-12-02 22:56:37 发布

阅读量2.2k

点赞数

分类专栏： JavaScript CSS 文章标签： CSS JavaScript

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Collapsed Form Elements</title>
    <style>
        .label{
            width: 400px;
            margin: 10px 0 0 0;
            padding: 10px;
            background-color: #ccccff;
            text-align: center;
            border: 1px solid #ccccff;
        }
        .elements{
            border: 1px solid #ccccff;
            padding: 10px;
            border: 1px solid #ccccff;
            width: 400px;
        }
        button{
            margin: 20px;
        }
    </style>
</head>
<body>
<form>
    <div>
        <div id="section1" class="label">
            <p>Checkboxes</p>
        </div>
        <br id="section1b" class="elements">
            <input type="checkbox" name="box1"/> - box one </br>
            <input type="checkbox" name="box1"/> - box one </br>
            <input type="checkbox" name="box1"/> - box one </br>
            <input type="checkbox" name="box1"/> - box one </br>
            <input type="checkbox" name="box1"/> - box one </br>
        </div>
    </div>
    <div>
        <div id="section2" class="label">
            <p>Buttons</p>
        </div>
        <div class="elements">
            <input type="radio" name="box1"/> - box one </br>
            <input type="radio" name="box1"/> - box one </br>
            <input type="radio" name="box1"/> - box one </br>
            <input type="radio" name="box1"/> - box one </br>
            <input type="radio" name="box1"/> - box one </br>
            <button>Submit</button>
        </div>
    </div>
</form>
<script type="text/javascript">

    /**
     * Css Visibility属性来隐藏和显示消息
     *
     * msg.style.hidden = "visible";   //显示
     * msg.style.hidden = "hidden";    //隐藏，但占用页面空间
     *
     * 或者CSS 的 display属性
     * msg.style.display = "block";  //显示
     * msg.style.display = "none";   //从显示状态删除
     *
     * display的4个属性
     * none: 该元素从显示中删除
     * block：元素当做一个块级元素来处理，在其前后都有换行
     * inline-block: 元素内容像一个块级元素一样格式化，然后向内联内容一样排列
     * inherit：（默认的显示），并且执行display属性继承至该元素的父节点
     *
     *
     * @type {NodeList}
     */

    var elements = document.getElementsByTagName("div");

    //折叠起所有的区段
    for(var i = 0; i <elements.length; i++){
        if(elements[i].className = "elements"){
            elements[i].style.display = "none";
        }else if(elements[i].className == "label"){
            elements[i].onclick = switchDisplay;
        }
    }

    //根据状态折叠或展开
    function switchDisplay(){
        var parent = this.parentNode;
        var target = parent.getElementsByTagName("div")[1];

        if(target.style.display == "none"){
            target.style.display = "block";
        }else{
            target.style.display = "none";
        }
        return false;
    }
</script>
</body>
</html>

u013131203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS通过操作Element的Css来实现隐藏和显示（本示例只有隐藏）

html>html lang="en" xmlns="http://www.w3.org/1999/html">head> meta charset="UTF-8"> title>Collapsed Form Elementstitle> style> .label{ width: 400px; margi
复制链接

扫一扫