css控制div显示／隐藏方法及２种方…

最新推荐文章于 2024-08-20 21:00:21 发布

夜猫long

最新推荐文章于 2024-08-20 21:00:21 发布

阅读量2.6k

点赞数

分类专栏： jquerymobile_js_html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/longzongqin/article/details/24007071

版权

jquerymobile_js_html 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS中的display和visibility

css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。
谈们的属性分别如下：

display:none|block;
display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。
dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。（把100块钱重新从抽屉里那出来放回桌子上）

visibility：hidden|visible;
visibility:hidden;隐藏该元素，正真的隐藏，但他还占有那块空间。这时，（桌子上有100块钱，这是我盖了桌布把他隐藏起来，钱还在那里）。
visibility:visible;让元素显示（拿掉了桌布，看到了100块钱）。

接下来用代码来举个例子，代码：

<html>
<head>
<script type="text/javascript">
function testDisplay()
{
    var divD = document.getElementByIdx_x_x_x("testD");
    if(divD.style.display=="none")
    {
        divD.style.display = "block";
    }
    else
    {
        divD.style.display = "none";
    }
}

function testVisibility()
{
    var divV = document.getElementByIdx_x_x_x("testV");
    if(divV.style.visibility =="hidden")
    {
        divV.style.visibility ="visible";
    }
    else
    {
        divV.style.visibility = "hidden";
    }
}
</script>
</head>
</body>
<div id="testD" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Display
        </div>
    </div>
</div>
<div id="testV" style="border:#ddd 1px solid">
    <div style="display:block;border:#ccc 2px solid">
        <div style="visibility:visible;border:#aaa 2px solid">
        Visibility
        </div>
    </div>
</div>
<input type="button" value="TestDisplay" οnclick="testDisplay()"/>
<input type="button" value="TestVisibility" οnclick="testVisibility()"/>
</body>
</html>

运行一下框中的代码就可以看到，当testD隐藏时，里面所有的框都隐藏，而且下面的divV和按钮都上移，而当divV隐藏的时候，只有他自己隐藏了，里面的其他元素都没有隐藏。（这里主要是把里面的div元素style属性设置为display和visible，如果去掉也会隐藏，但是，按钮还是不会上移，可以试一下。）

jquery的div显示和隐藏

复制代码

1

css控制div显示／隐藏方法及２种方法比较原码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2

css控制div显示／隐藏方法及２种方法比较原码

< html xmlns ="http://www.w3.org/1999/xhtml" >
3

css控制div显示／隐藏方法及２种方法比较原码

< head >
4

css控制div显示／隐藏方法及２种方法比较原码

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
5

css控制div显示／隐藏方法及２种方法比较原码

< title > 无标题文档 </ title >
6

css控制div显示／隐藏方法及２种方法比较原码

< script src ="jquery_last.js" type ="text/javascript" ></ script >
7

css控制div显示／隐藏方法及２种方法比较原码

< script type ="text/javascript" >
8

css控制div显示／隐藏方法及２种方法比较原码

$(document).ready( function(){});
9

css控制div显示／隐藏方法及２种方法比较原码

function hiden(){
10

css控制div显示／隐藏方法及２种方法比较原码

$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
11

css控制div显示／隐藏方法及２种方法比较原码

}
12

css控制div显示／隐藏方法及２种方法比较原码

function slideToggle(){
13

css控制div显示／隐藏方法及２种方法比较原码

$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
14

css控制div显示／隐藏方法及２种方法比较原码

}
15

css控制div显示／隐藏方法及２种方法比较原码

function show(){
16

css控制div显示／隐藏方法及２种方法比较原码

$("#divObj").show();//显示,参数说明同上
17

css控制div显示／隐藏方法及２种方法比较原码

}
18

css控制div显示／隐藏方法及２种方法比较原码

function toggle(){
19

css控制div显示／隐藏方法及２种方法比较原码

$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
20

css控制div显示／隐藏方法及２种方法比较原码

21

css控制div显示／隐藏方法及２种方法比较原码

}
22

css控制div显示／隐藏方法及２种方法比较原码

function slide(){
23

css控制div显示／隐藏方法及２种方法比较原码

$("#divObj").slideDown();//窗帘效果展开
24

css控制div显示／隐藏方法及２种方法比较原码

}
25

css控制div显示／隐藏方法及２种方法比较原码

26

css控制div显示／隐藏方法及２种方法比较原码

</ script >
27

css控制div显示／隐藏方法及２种方法比较原码

</ head >
28

css控制div显示／隐藏方法及２种方法比较原码

29

css控制div显示／隐藏方法及２种方法比较原码

< body >
30

css控制div显示／隐藏方法及２种方法比较原码

< h3 > div里内容的显示隐藏特效 </ h3 >
31

css控制div显示／隐藏方法及２种方法比较原码

< input type ="button" value ="隐藏" onclick ="hiden()" />
32

css控制div显示／隐藏方法及２种方法比较原码

< input type ="button" value ="显示" onclick ="show()" />
33

css控制div显示／隐藏方法及２种方法比较原码

< input type ="button" value ="窗帘效果显示2" onclick ="slide()" />
34

css控制div显示／隐藏方法及２种方法比较原码

< input type ="button" value ="窗帘效果的切换" onclick ="slideToggle()" />
35

css控制div显示／隐藏方法及２种方法比较原码

< input type ="button" value ="隐藏显示效果切换" onclick ="toggle()" />
36

css控制div显示／隐藏方法及２种方法比较原码

< div id ="divObj" style ="display:none" >
37

css控制div显示／隐藏方法及２种方法比较原码

1.测试例子 < br />
38

css控制div显示／隐藏方法及２种方法比较原码

2.测试例子 < br />
39

css控制div显示／隐藏方法及２种方法比较原码

3.测试例子 < br />
40

css控制div显示／隐藏方法及２种方法比较原码

4.测试例子 < br />
41

css控制div显示／隐藏方法及２种方法比较原码

5.测试例子 < br />
42

css控制div显示／隐藏方法及２种方法比较原码

6.测试例子 < br />
43

css控制div显示／隐藏方法及２种方法比较原码

7.测试例子 < br />
44

css控制div显示／隐藏方法及２种方法比较原码

8.测试例子 < br />
45

css控制div显示／隐藏方法及２种方法比较原码

9.测试例子 < br />
46

css控制div显示／隐藏方法及２种方法比较原码

0.测试例子 < br />
47

css控制div显示／隐藏方法及２种方法比较原码

</ div >
48

css控制div显示／隐藏方法及２种方法比较原码

</ body >
49

css控制div显示／隐藏方法及２种方法比较原码

</ html >
50

css控制div显示／隐藏方法及２种方法比较原码

复制代码

jquery判断div是否隐藏实例

<script>

$(document).ready(function(){

var temp= $("#test").is(":hidden");//是否隐藏

var temp1= $("#test").is(":visible");//是否可见

alert(temp) ;

alert(temp1) ;

});

</script>

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。