Home > Article > Web Front-end > How to modify the visibility attribute in jquery

How to modify the visibility attribute in jquery

青灯夜游Original: 2022-03-01 16:31:403713browse

Modification method: 1. Use the css() method, the syntax "$(selector).css("visibility","new value")"; 2. Use the attr() method, the syntax "$(selector" ).attr("style","visibility:new value;")".

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

The visibility attribute specifies whether the element is visible. Attribute values that can be set:

Value	Description
visible	Default value . The element is visible.
hidden	The element is invisible.
collapse	When used in a table element, this value deletes a row or column, but it does not affect the layout of the table. The space occupied by a row or column is freed for other content. If this value is used on another element, it will be rendered as "hidden".

jquery modifies the visibility attribute

1. Use the css() method

$(selector).css("visibility","新值");

Example:

<!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(){
			  $("button").click(function(){
			    $("#box").css("visibility","hidden");
			  });
			});
		</script>
<style></style>
	</head>

	<body>
		<p>可见的段落</p>
		<p id="box" style="visibility: visible;">可见的段落</p>
		<p>可见的段落</p>
		<button>修改visibility属性</button>
	</body>

</html>

How to modify the visibility attribute in jquery

2. Use the attr() method

$(selector).attr("style","visibility:新值;")

Example:

<!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(){
			  $("button").click(function(){
			    $("#box").attr("style","visibility:visible;");
			  });
			});
		</script>
<style></style>
	</head>

	<body>
		<p>可见的段落</p>
		<p id="box" style="visibility: hidden;">隐藏的段落</p>
		<p>可见的段落</p>
		<button>修改visibility属性</button>
	</body>

</html>

How to modify the visibility attribute in jquery

[Recommended learning: jQuery video tutorial, web front-end development video】

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

jquery css

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

Previous article：How to modify the value of a specified attribute in jqueryNext article：How to modify the value of a specified attribute in jquery

See more

How to modify the visibility attribute in jquery

Related articles