文档章节

js控制页面元素的隐藏与显示

风中帆
 风中帆
发布于 2014/05/29 16:57
字数 164
阅读 178
收藏 0
点赞 0
评论 0

<body>

<div>
  <button onclick='javascript:Layer_HideOrShow();'>show</button>
  </div>
  <div id="hiddenDiv" style="display: block; visibility: visible;">
  this is hiddenDiv !
  </div>

</body>

 

1.

function Layer_HideOrShow() 

 {      var current=document.getElementById("hiddenDiv"); 

        if(current.style.visibility=="hidden") 

        {    current.style.visibility ="visible"; 

        } else  {  current.style.visibility ="hidden";  } 

 } 

2.
function  Layer_HideOrShow(){ 

     if (document.getElementById){ 

            target=document.getElementById("hiddenDiv"); 

             if (target.style.display=="block"){ 

                 target.style.display="none"; 

             } else { 

                  target.style.display="block"; 

             } 

     } 

}

3.
function  Layer_HideOrShow(){
   $("#hiddenDiv").show();  
   $("#hiddenDiv").hide(); 

}

4.

要控制div的显示与隐藏:
$("#id").show()表示display:block,
$("#id").hide()表示display:none;
$("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

$("#id").css('display','none');
$("#id").css('display','block');

$("#id")[0].style.display = 'none';

© 著作权归作者所有

共有 人打赏支持
风中帆
粉丝 13
博文 186
码字总数 17363
作品 0
青岛
被遗忘的CSS和HTML(二)

前言 先前写了一篇《被遗忘的CSS和HTML(一)》,后来因为各种事情,懒得写。最近把文章分享到掘金收获了不少点赞和鼓励,决定就再写点,希望从另一个角度去看一些问题的解决方法,还是那句话...

VeeQun ⋅ 06/05 ⋅ 0

JS/jquery实现鼠标事件控制页面元素显隐

最近因为公司网站要上一个活动广告横幅,当用户鼠标划过时显隐二维码。像这种鼠标事件控制页面元素显隐的情况,码农们会经常遇到,可以通过javascript或jquery代码实现,下面就几种常见需求一...

GavinHsueh ⋅ 05/21 ⋅ 0

JavaWeb04-HTML篇笔记(二)

1.1 使用JQuery完成定时弹出广告:1.1.1 需求: 之前使用的JS的方式完成定时弹出广告,现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析: 【JQuery的概述】 【JS对象和JQ对象的转...

我是小谷粒 ⋅ 05/08 ⋅ 0

Vue笔记(11) - js动画和velocityjs、多组件、列表渲染

可以在属性中声明 JavaScript 钩子,然后钩子绑定事件处理程序,在事件处理程序中改变元素,以达到js实现动画。 例子: 事件处理程序中的动画,我们可以使用velocityjs这个库,而不用自己写。...

神奇的小卷毛 ⋅ 04/24 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

chrome浏览器中 F12 功能的简单介绍

由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调...

m0_37724356 ⋅ 04/10 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

AJAX基础之JavaScript基础与增强(一)

一、什么是JavaScript   JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现...

architect刘源源 ⋅ 05/08 ⋅ 0

第二章--在HTML中使用JavaScript

2. "字符串 2.1.2 不

lovewt ⋅ 06/05 ⋅ 0

简述关于通过js判断dom元素去改变该元素的css属性

简述: 很多场景中,都需要我们需要去通过js去判断DOM元素,按照自己实际的需要去改变DOM的css属性。 例如,弹窗的显示和隐藏、背景图片的更换、导航icon的高亮等等..... 今天就来简单讨论关...

Cc卿 ⋅ 05/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

内核线程、轻量级进程、用户线程

线程与进程概念 在现代操作系统中,进程支持多线程。 进程是资源管理的最小单元; 线程是程序执行的最小单元。 即线程作为调度和分配的基本单位,进程作为资源分配的基本单位 一个进程的组成...

117 ⋅ 22分钟前 ⋅ 0

elasticsearch2.4.6升级为elasticsearch-5.5.0的经历

将elasticsearch-5.5.0 中的配置 path.data 指向原来的数据路径 即 path.data: /usr/local/src/elasticsearch-2.4.6/data 注意: elasticsearch-5.5.0 需要将jdk版本升级到1.8...

晨猫 ⋅ 22分钟前 ⋅ 1

lvm讲解 磁盘故障小案例

1

oschina130111 ⋅ 27分钟前 ⋅ 0

那些提升开发人员工作效率的在线工具

本文转载自公众号 Hollis 作为一个Java开发人员,经常要和各种各样的工具打交道,除了我们常用的IDE工具以外,其实还有很多工具是我们在日常开发及学习过程中要经常使用到的。 Hollis偏爱使用...

时刻在奔跑 ⋅ 39分钟前 ⋅ 0

restful风格 实现DELETE PUT请求 的web.xml的配置

import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframe......

泉天下 ⋅ 44分钟前 ⋅ 0

Shell数组

Shell数组 Shell在编程方面比Windows批处理强大很多,无论是在循环、运算。 bash支持一维数组(不支持多维数组),并且没有限定数组的大小。类似与C语言,数组元素的下标由0开始编号。获取数...

蜗牛奔跑 ⋅ 54分钟前 ⋅ 0

nmap为了开发方便 可以做简单的修改

因为nmap扫描是默认使用的是nse脚本,但是在开发的过程中需要修改后缀(主要是因为后缀为lua才能显示高亮,所以这里用一个取巧的办法) nse_main.lua文件中我们找到如下代码 local t, path = cn...

超级大黑猫 ⋅ 58分钟前 ⋅ 0

springmvc获取axios数据为null情况

场景:前端用了vue没有用ajax与后台通信,用了axios,但是在代码运行过程中发现axios传递到后台的值接受到数据为null。 问题原因:此处的问题在与axios返回给后台的数据为json类型的,后台接...

王子城 ⋅ 今天 ⋅ 0

hadoop技术入门学习之发行版选择

经常会看到这样的问题:零基础学习hadoop难不难?有的人回答说:零基础学习hadoop,没有想象的那么难,也没有想象的那么容易。看到这样的答案不免觉得有些尴尬,这个问题算是白问了,因为这个...

左手的倒影 ⋅ 今天 ⋅ 0

806. Number of Lines To Write String - LeetCode

Question 806. Number of Lines To Write String Solution 思路:注意一点,如果a长度为4,当前行已经用了98个单元,要另起一行。 Java实现: public int[] numberOfLines(int[] widths, Str...

yysue ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部