div css两种盒子模型div 隐藏和显示方式的区别

JS判断DIV是否是隐藏或显示-js教程-ab蓝学网
当前位置: &
JS判断DIV是否是隐藏或显示
简介:WEB前端|JS判断DIV是否是隐藏或显示,有时要用js获取div是display="none"或是显示的情况&divid="div1"style="display:width:heig...
JS判断DIV是否是隐藏或显示,有时要用js获取div是display="none" 或是显示的情况
&div id="div1" style="display: width: height:"&&/div&
这段代码是标记了一个隐藏的div,通常在满足某些条件下才会让它显示出来,但是有的时候事情并不总是这么简单,或许还要事先知道它是否已经显示出来了才能做进一步的操作,这时候可以使用js做个简单的判断:
var o =document.getElementById("div1").style.
if(o=="none") //已经是隐藏状态
document.getElementById("div1").innerHTML = ""; //div要显示的内容
document.getElementById("div1").style.display = ""; //使之可见
document.getElementById("div1").innerHTML = ""; //div要显示的内容
document.getElementById("div1").style.display = "none"; //使之不可见
(function(w, d, g, J) { var e = J.stringify
J. d[g] = d[g]
d[g]['showValidImages'] = d[g]['showValidImages']
function() {
w.postMessage(e({'msg': {'g': g, 'm':'s'}}), location.href); }
})(window, document, '__huaban', JSON);
转载注明本文地址:
如果觉得《JS判断DIV是否是隐藏或显示》不错,请把本站告诉您身边的朋友!
上一编:下一编:
正在加载 JS判断DIV是否是隐藏或显示 评论...4种方式实现简单的显示和隐藏
Html代码:&div class=&topicList&&
&h3&&span&学习天地&/span&&/h3&
Jquery代码:第一种实现方式:1. &script type=&text/javascript&&
$(function(){
$(&.topicList h3&).click(function(){
var UL = $(this).next(&ul&);
if(UL.css(&display&)==&none&){
UL.css(&display&,&block&);
UL.css(&display&,&none&);
&第二种实现方式:2. &script type=&text/javascript&&
$(function(){
$(&.topicList h3&).toggle(function(){
$(this).next(&ul&).hide(1000);
},function(){
$(this).next(&ul&).show(1000);
&/script&第三种实现方式:可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。3. &script type=&text/javascript&&
$(function(){
$(&.topicList h3&).toggle(function(){
$(this).next(&ul&).css(&display&,&none&);
},function(){
$(this).next(&ul&).css(&display&,&block&);
&/script&&第四种实现方式:toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。4. &script type=&text/javascript&&
$(function(){
$(&.topicList h3&).toggle(topicHandler,topicHandler);
function topicHandler(){
//使用fadeIn、show、slideDown可以完成某个容器的显示
//使用fadeOut、hide、slideUp可以完成某个容器的隐藏
//所以可以通过各个的toggle来完成两个之间的轮换
$(this).next(&ul&).toggle(1000);
> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!
Java程序操作Oracle两种方式之简单实现
1.通过JDBC-ODBC桥连接Oracle数据库
(1)创建odbc源,在控制面板-&管理工具-&数据源(odbc)中添加DSN,比如取名为wangtao,选择一个Service,输入用户名密码,测试连接,若通过说明成功:(注意:这里假设已创建好Oracle数据库,即图中TNS Serv ...
今天来给大家贴一段代码,代码的作用就是利用jQuery将物体居中,并且转换显示和隐藏: 首先建立一个div标签并且写好css样式,具体如下 然后我想要的效果是当我点击了button这个按钮,test可以居中显示,第二次点击一次test消失,第三次点击又居中显示,这样循环下去: 具体js代码如下: 稍微解释一下代码的意思: 1.$('#test').get(0 ...
最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTabHost方法来得到一个TabHost的实例,然后就可以给这个TabHost添加Tab了.示例代码如下: [java] view plaincopy publi ...
&%@ page language=&java& import=&java.util.*& pageEncoding=&UTF-8&%& &% String path = request.getContextPath(); String basePath = request.get ...
今天参加了一个Code Review活动,看了一个同事的写的代码,感觉满足了当前的功能实现,但是从长远来看,无论从代码复用角度还是维护上看都显得非常差.先看看需求是什么吧.需求是通过下拉框的选择不同的选项,来显示和隐藏一个文本框.同事是这样写的: Code 1 &select name=&select& onChange=&quot ...
我写的一个测试QDockWidget界面,源码设计如下: //隐藏或显示属性视图docking ui-&PropertyView-&setCheckable(true); ui-&PropertyView-&setChecked(true); ui-&PropertyView-&setVisible(true); conn ...
一.XMLHttpRequest实现获取数据 不使用jQuery实现页面不刷新获取内容的方式,我们这里采用XMLHttpRequest原生代码实现:js代码如下: //1.获取a节点,并为其添加Oncilck响应函数document.getElementsByTagName(&a&)[0].onclick = function(){ // ...
通常情况下,都会遇到取最值的情况,T-SQL提供了多种方式实现最值比较,简单罗列几种. 1. NOT EXISTS USE [AdventureWorks2012]; GO DBCC FREEPROCCACHE; GO SET STATISTICS PROFILE ON; SET STATISTICS IO ON; SET STATISTICS TIME O ...

我要回帖

更多关于 div css两种盒子模型 的文章

 

随机推荐