css: display:none, display:block

 

?
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none, display:block</title>
    <script src="../jquery/3.6.0/jquery.min.js"></script>
     
    <style type="text/css">
    .geovindu {
  display: none;
}
    </style>
</head>
 
<body>
    <div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="geovindu">
    This is a paragraph with little content.<br/> This is another small paragraph.
  </div>
</div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.button').click(function() {
        console.log("block1");
    //let item = $(this).closest('geovindu');
    //let item = $("#item").css("display", "none");
    let items = document.querySelector('div.geovindu');
        console.log(items);
    if (getComputedStyle(items).display == 'none') {
        console.log("none");
        $(".geovindu").css("display", "block");
      //item.show();
      //item.css('display', 'block');
        console.log("block");
         
    } else if (getComputedStyle(items).display == 'block') {
        console.log("block d");
      //item.hide();
      $(".geovindu").css("display", "none");
      //item.css('display', 'none');
        console.log("ok");
    }
  });
});
     
    </script>
</body>
</html>

　

 

?
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
57
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none, display:block</title>
    <script src="../jquery/3.6.0/jquery.min.js"></script>
     
    <style type="text/css">
    .geovindu {
  display: none;
}
    </style>
</head>
 
<body>
    <div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="geovindu" id="geovidnu">
    This is a paragraph with little content.<br/> This is another small paragraph.
  </div>
</div>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.button').click(function() {
        console.log("block1");
    //let item = $(this).closest('geovindu');
    //let item = $("#item").css("display", "none");  getElementsByTagName(), .getElementsByClass(), .querySelectorAll(),.getElementById()
        let parentDOM = document.getElementById("container");
         
        let item=document.getElementsByClassName("geovindu")[0];
    let items = document.querySelector('div.geovindu');
        console.log(items);
        console.log("geovindu:"+item);
    if (getComputedStyle(items).display == 'none') {
        console.log("none");
        //$(".geovindu").css("display", "block");
      //item.show();
        $(".geovindu").show();
          
        //item.css('display', 'block');
        console.log("block");
         
    } else if (getComputedStyle(items).display == 'block') {
        console.log("block d");
       //item.hide();
        $(".geovindu").hide();
     // $(".geovindu").css("display", "none");
      //item.css('display', 'none');
        console.log("ok");
    }
  });
});
     
    </script>
</body>
</html>

　　

　

posted @   ®Geovin Du Dream Park™  阅读(9)  评论(0)  编辑  收藏  举报
相关博文：
·  css: SVG and CSS
·  SVG click event Designs
·  css32 CSS Layout - display: inline-block
·  display block是什么意思？怎么用？常见的块级元素、行内元素、行内块元素
·  网页布局------小米商城页面布局
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示