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

How to modify the hidden attribute in jquery

青灯夜游

Release： 2022-03-24 17:11:59

Original

3331 people have browsed it

Method: 1. Use attr(), the syntax is "element object.attr("hidden", value)"; 2. Use prop(), the syntax is "element object.prop("hidden", value) "; 3. Use removeAttr(), the syntax is "element.removeAttr("hidden")".

How to modify the hidden attribute in jquery

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

The hidden attribute specifies that the element is hidden. Hidden elements will not be displayed. If this attribute is used, the element will be hidden.

jquery modifies the hidden attribute

1. Use the attr() attribute to set the value of the hidden attribute

<!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(){
					$("div").attr("hidden",false);
				});
			});
		</script>
	</head>
	<body>
		<p>测试文字-p元素</p>
		<div hidden>测试文字-div元素</div>
		<p>测试文字-p元素</p>
		<button>修改hidden属性 </button>
	</body>
</html>

Copy after login

How to modify the hidden attribute in jquery

2. Use the prop() attribute to set the value of the hidden attribute

<!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(){
					$("div").prop("hidden",false);
				});
			});
		</script>
	</head>
	<body>
		<p>测试文字-p元素</p>
		<div hidden>测试文字-div元素</div>
		<p>测试文字-p元素</p>
		<button>修改hidden属性 </button>
	</body>
</html>

Copy after login

The operation effect is the same as method 1

3. Use the removeAttr() attribute to delete the hidden attribute

<!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(){
					$("div").removeAttr("hidden");
				});
			});
		</script>
	</head>
	<body>
		<p>测试文字-p元素</p>
		<div hidden>测试文字-div元素</div>
		<p>测试文字-p元素</p>
		<button>修改hidden属性 </button>
	</body>
</html>

Copy after login

The operation effect is the same as method 1

[Recommended learning: jQuery video tutorial, web Front-End Video】

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