zoukankan      html  css  js  c++  java
  • 显示 隐藏DIV的技巧

     使用bootstrap的12分栅来演示

    style="display: none;" 隐藏后释放占用的页面空间

      document.getElementById("typediv1").style.display="none";//隐藏

      document.getElementById("typediv1").style.display="";//显

                      <div class="form-group">
                                    <div class="col-lg-3 col-sm-6">
                                        <label class="col-sm-4 control-label">{{taskId}}</label>
                                        <div class="col-md-8">
                                            <input type="text" id="xxx" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6"  style="display:none;">
                                        <label class="col-sm-4 control-label">{{msgId}} </label>
                                        <div class="col-sm-8"   >
                                            <input type="text" id="xxx" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <label class="col-sm-4 control-label">{{createTime}}</label>
                                        <div class="xxx   input-group col-sm-8" >
                                            <input type="text" id="xxx" class="xxx">
                                            <span class="input-group-addon">
                                                <i class="fa fa-clock-o bigger-110"></i>
                                            </span>
                                        </div>
                                </div>
    
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{to}}</label>
                                    <div  class="xxxe input-group col-sm-8">
                                        <input id="xxx"
                                            class="xxx">
                                        <span class="input-group-addon"> <i
                                            class="fa fa-clock-o bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                           </div>

    style="visibility:hidden;"  隐藏后不释放空间

      document.getElementById("typediv1").style.visibility="hidden";//隐藏

      document.getElementById("typediv1").style.visibility="visible";//显示

                      <div class="form-group">
                                    <div class="col-lg-3 col-sm-6">
                                        <label class="col-sm-4 control-label">{{taskId}}</label>
                                        <div class="col-md-8">
                                            <input type="text" id="xxx" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6"  style="visibility:hidden;">
                                        <label class="col-sm-4 control-label">{{msgId}} </label>
                                        <div class="col-sm-8"   >
                                            <input type="text" id="xxx" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col-lg-3 col-sm-6">
                                        <label class="col-sm-4 control-label">{{createTime}}</label>
                                        <div class="xxx input-group col-sm-8" >
                                            <input type="text" id="xxx" class="form-control xxx">
                                            <span class="input-group-addon">
                                                <i class="fa fa-clock-o bigger-110"></i>
                                            </span>
                                        </div>
                                </div>
    
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{to}}</label>
                                    <div  class="xxx input-group col-sm-8">
                                        <input id="xxx"
                                            class="form-control xxx">
                                        <span class="input-group-addon"> <i
                                            class="fa fa-clock-o bigger-110"></i>
                                        </span>
                                    </div>
                                </div>
                           </div>

       

  • 相关阅读:
    2
    1
    nginx隐藏版本号
    全面对比主流 .NET 报表控件 (转)
    前端的发展和未来趋势
    NPM初学者指南 (转)
    一文解读MySQL事务
    如何高效的学习技术
    重新统一的 .NET平台-.NET 5
    为啥要有微服务?啥是微服务?
  • 原文地址:https://www.cnblogs.com/slowcity/p/9018457.html
Copyright © 2011-2022 走看看