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

来源：互联网发布：什么是矩阵的秩编辑：程序博客网时间：2024/04/27 16:26

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";
    }
}

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

jquery的div显示和隐藏

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

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

<head>
4

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

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

functionhiden(){
10

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

}
12

functionslideToggle(){
13

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

}
15

functionshow(){
16

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

}
18

functiontoggle(){
19

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

}
22

functionslide(){
23

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

}
25

</script>
27

</head>
28

<body>
30

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

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

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

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

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

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

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

1.测试例子<br/>
38

2.测试例子<br/>
39

3.测试例子<br/>
40

4.测试例子<br/>
41

5.测试例子<br/>
42

6.测试例子<br/>
43

7.测试例子<br/>
44

8.测试例子<br/>
45

9.测试例子<br/>
46

0.测试例子<br/>
47

</div>
48

</body>
49

</html>
50

jquery判断div是否隐藏实例

$(document).ready(function(){

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

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

alert(temp) ;

alert(temp1) ;

});

</script>

0 0