css: display:none, display:block

 

<!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>

　

 

<!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 @ 2023-07-22 16:08  ®Geovin Du Dream Park™  阅读(16)  评论(0)    收藏  举报