How to modify the style attribute in jquery to hide elements-Front-end Q&A-php.cn

How to modify the style attribute in jquery to hide elements

青灯夜游

Release： 2022-06-08 16:34:14

Original

3124 people have browsed it

Two hiding methods: 1. Use css() to control the display style, the syntax is "element object.css('display','none')"; 2. Use attr() to control the display style, the syntax is " Element object.attr('style','display:none')".

How to modify the style attribute in jquery to hide elements

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

Two methods for jquery to modify the style attribute to hide elements

css() method
attr() method

1. Use css() method

Use css() to control display or visibility Style, syntax:

元素对象.css(&#39;display&#39;,&#39;none&#39;);//隐藏
元素对象.css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏

Copy after login

Example:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
			.start{
				color: peru;
			}
		</style>
		<script>
			$(document).ready(function() {

				$("button").click(function() {
					$("p").css(&#39;display&#39;,&#39;none&#39;);//隐藏
					$("div").css(&#39;visibility&#39;,&#39;hidden&#39;);//元素隐藏
				});
			});
		</script>
	</head>
	<body>

		<p>一个p元素</p>
		<div>一个div元素</div>
		<p>一个p元素</p>
		<button>隐藏元素</button>
	</body>
</html>

Copy after login

How to modify the style attribute in jquery to hide elements

#2. Use attr() method

Use attr() to control display or visibility style, syntax:

元素对象.attr(&#39;style&#39;,&#39;display:none&#39;);//隐藏
元素对象.attr(&#39;style&#39;,&#39;visibility:hidden&#39;);//元素隐藏

Copy after login

Example:

$(document).ready(function() {
	$("button").click(function() {
		$("p").attr(&#39;style&#39;,&#39;display:none&#39;);//隐藏
		$("div").attr(&#39;style&#39;,&#39;visibility:hidden&#39;);//元素隐藏
	});
});

Copy after login

How to modify the style attribute in jquery to hide elements

[Recommended learning:

jQuery video tutorial、webfront-end video】

The above is the detailed content of How to modify the style attribute in jquery to hide elements. For more information, please follow other related articles on the PHP Chinese website!