JS隐藏和显示div的方式有两种:

需要注意的是用JS设置div的属性,必须在ccs中设置对应属性,否则报错。

同理可以设置相同class,进行批量设置。

  1. display--隐藏后释放占用的页面空间。

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏
document.getElementById("demo").style.display="";//显示
  1. visibility--隐藏后仍占有页面空间,显示空白。

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏
document.getElementById("demo").style.visibility="visible";//显示

注意:使用第二方式更人性化,但是,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。

jQuery隐藏和显示div的方式

  1. .attr
$("#demo").attr("style","display:none;");//隐藏div
$("#demo").attr("style","display:block;");//显示div
  1. .css
$("#demo").css("display","none");//隐藏div
$("#demo").css("display","block");//显示div
  1. hide()、show()
$("#demo").hide();//隐藏div
$("#demo").show();//显示div
  1. hide()、show()
$("#demo").hide();//隐藏div
$("#demo").show();//显示div

注:1和2中的display:none可以换成visibility:hidden,display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间,而后者隐藏后会占空间。

div隐藏、显示的更多相关文章

  1. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  2. div 隐藏显示各种例子

    <html><head><title>jquery show()</title><script type="text/javascrip ...

  3. div的显示和隐藏

    本文从学习角度出发,仅当做笔记.高手可以忽略本文. 借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间. js控制显示和隐藏的代码: <script ty ...

  4. 设置DIV隐藏与显示,表格滑动条

    问题描述:         现在希望使用JS设置DIV块的显示与隐藏,当某一个事件触发是,自动显示DIV块,显示表格数据,但是要求表格显示滑动条 问题解决:   (1)DIV块的隐藏与显示 如上所示, ...

  5. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  6. 利用JS做到隐藏div和显示div

    div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;" document.getElementById( ...

  7. jquery实现点击控制div的显示和隐藏

    我们使用点击显示.点击隐藏的时候,一般有两种可选方案 .示例 html <div class="index"> <h1> 首页 </h1> &l ...

  8. jquery怎么实现点击一个按钮控制一个div的显示和隐藏

    示例html 1 2 <div class="abc" style="display:none"></div> <input ty ...

  9. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  10. 实现对div的显示隐藏

    jQuery对div的显示和隐藏: 显示: 复制代码 代码如下:$("#id").show() 隐藏: 复制代码 代码如下: $("#id").show() j ...

随机推荐

  1. matlab数操作

    随循环填充(更新)矩阵 不断更新矩阵,填充矩阵,可用cat函数: C = cat(dim,A,B); 向量重复扩充矩阵 将相同的向量或矩阵进行重复扩充时,matlab有两种方法:(第二种方法的效率更高 ...

  2. [js函数] storageManager

    import _get from 'lodash.get'; import _set from 'lodash.set'; import _debounce from 'lodash.debounce ...

  3. Unity旧版图集和新版图集

    1.关于旧版图集 ===>结论:设置PackingTag就可以了. ===>分析:设置好PackingTag,那么在进行打包的时候,同一个标签的会被打到1个图集里面,图集最大为2048x2 ...

  4. easyui datagrid 表头与数据错位

    方法一:容易,实用的方法 在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace 例子:field. ...

  5. 第一个helloworld程序

    ; hello.asm section .data msg db "hello, world",13,10,0 section .bss section .text global ...

  6. STP协议-基础

    生成树协议 一 .技术背景一个缺乏冗余性设计的网络:任何一个网络节点出现故障,会造成单链路故障.单设备故障,使整个网络瘫痪. 引入冗余性的同时也引入了二层环路:网络的冗余性增强了,但是却出现了二层环路 ...

  7. python3 小知识

    本博客分为三部分,一是字典和函数结合,代替if-else判断语句:二是数组的元素带有括号:三是完整代码.图片略多. 1. 字典和函数结合,代替if-else判断语句   写函数时经常会遇到一个函数的某 ...

  8. 网络很慢mtu设置

    [root@db-***** etc]# cat /etc/rc.local #!/bin/sh # # This script will be executed *after* all the ot ...

  9. Java-面向对象基础 构造方法

    public class Dog {// 定义属性 String nick; String color; int age; // 定义构造方法 public Dog(String nick,Strin ...

  10. SAP 结构转JSON

    *使用方式 jsonstr = zui2_json=>serialize( data = ls_in compress = abap_true pretty_name = zui2_json=& ...