css样式怎么隐藏起来


本文摘自PHP中文网,作者V,侵删。

把css样式隐藏起来的方法是,给元素设置【display:none;】属性,这样元素便会被隐藏,同时不再占据原来的位置。如果要重新显示元素,可以设置【displayL:block;】属性。

本文操作环境:windows10系统、css 3、thinkpad t480电脑。

如果我们要隐藏css中的样式,那么我们可以使用display属性,这个属性的其中一个属性值是none。

一个样式在设置了display:none属性后,元素便会被隐藏,不再占据原来的位置。如果我们要重新显示该元素,只需要设置display:block;即可,这样一来元素便会重新显示出来。

我们来做一个简单的代码测试,有两个按钮,点击开的按钮,div标签的dispaly属性改为 block,显示出来,点击关的按钮,div标签的dispaly属性改为 none,隐藏出来。

具体代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            background-color: rgba(0, 0, 0, 0.8);

        }

        .b1{

            width: 150px;

            height: 30px;

            margin-top: 100px ;

            margin-left: 500px;

        }

        .b2{

            width: 150px;

            height: 30px;

            margin-top: 100px ;

            margin-left: 100px;

        }

        div{

            /* 隐藏元素 */

            display: none;

            width: 300px;

            height: 300px;

            background-color: yellow;

            border-radius: 50%;

            margin: 50px auto;

        }

    </style>

</head>

<body>

    <button> 开</button>

    <button>关</button>

    <div></div>

 

    <script>

        var btn01 = document.querySelector(".b1");

        var btn02  =document.querySelector(".b2")

        var div01 = document.querySelector("div")

 

        btn01.addEventListener("click",function(){

            div01.style.display  = "block";

        })

        btn02.addEventListener("click",function(){

            div01.style.display  = "none";

        })

    </script>

</body>

</html>

运行截图如下:

d9f21c087ad67061e19b11f8cb6d62e.png

8a0c7afdf9eb554ebfc1863af23d567.png

相关视频教程分享:css视频教程

以上就是css样式怎么隐藏起来的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css表示什么

css如何修改光标颜色

如何替换bootstrap中的样式

css怎么排除第一个子元素

css文件的扩展名是什么?

css 层叠是什么

如何利用css画出一个三角形

如何解决css英文不自动换行的问题

css盒模型有哪些属性

css三种样式表写法是什么

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...