How to hide elements in position using jquery-Front-end Q&A-php.cn

How to hide elements in position using jquery

青灯夜游

Release： 2022-04-20 16:50:43

Original

1918 people have browsed it

Implementation method: 1. Use css() to add visibility style to the element and set it to be invisible. The syntax is "element object.css('visibility','hidden');"; 2. Use css() to set it to invisible. The transparency of an element is set to 0 with the syntax "ElementObject.css('opacity',0)".

How to hide elements in position using jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

There are two ways to implement position-occupying hidden elements:

Add visibility: hidden;Style
#Add
opacity: 0 style to the element

In jquery, you can use the css() method to achieve the above effect:

1. Use css() to add visibility style to the element and set it to be invisible

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".visibility").css("visibility","hidden");
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示元素</div>
		<div class="visibility">隐藏元素</div>
		<div>正常显示元素</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

Copy after login

How to hide elements in position using jquery

Description:

visibility attribute specifies the element visible or not.

This attribute specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible. The value collapse is used in tables to remove columns or rows from the table layout.

Method 2: Use css() to set the transparency of the element to 0

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$(".opacity").css(&#39;opacity&#39;,0);
				});
			});
		</script>
	</head>
	<body>
		<div>正常显示元素</div>
		<div class="opacity">隐藏元素</div>
		<div>正常显示元素</div>
		<br>
		<button>占位置隐藏元素</button>

	</body>
</html>

Copy after login

How to hide elements in position using jquery

Instructions:

The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element.

This means that setting opacity to 0 only visually hides the element. The element itself still occupies its own position and contributes to the layout of the web page. This is similar to visibility: hidden above.