Home >Web Front-end >JS Tutorial >How to display hidden elements with jquery attr()

How to display hidden elements with jquery attr()

青灯夜游
青灯夜游Original
2021-11-16 14:30:533902browse

attr() method to display and hide elements: 1. Use the "$("element").attr("style","display:block");" statement to display the element; 2. Use "$ ("Element").attr("style","display:none");" statement hides the element.

How to display hidden elements with jquery attr()

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

In jquery, you can use the attr() method to add a display style to the styles attribute of an element to show or hide the element.

  • display:blockDisplayable elements

  • display:noneHideable elements

Implementation code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#but1").click(function() {
					$("div").attr("style","display: none;");
				});
				$("#but2").click(function() {
					$("div").attr("style","display: block;");
				});
			});
		</script>
		<style>
			div{
				margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<div>hello</div>
		<div>欢迎来到PHP中文网!</div>
		<button id="but1">隐藏元素</button> <button id="but2">显示元素</button>
	</body>
</html>

How to display hidden elements with jquery attr()

Related tutorial recommendations: jQuery video tutorial

The above is the detailed content of How to display hidden elements with jquery attr(). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn