search

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:403735browse

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;")".

How to modify the visibility attribute in jquery

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

Related articles

See more