How to remove z-index style in jquery-Front-end Q&A-php.cn

How to remove z-index style in jquery

青灯夜游

Release： 2023-01-28 14:13:29

Original

1725 people have browsed it

Jquery method to remove z-index style: 1. Use css() to remove, just set the value of z-index attribute to the default value "auto", the syntax "$(" select ").css("z-index","auto");"; 2. Use attr() to set the value of the z-index attribute to the default value "auto", the syntax is "$("selector" ).attr("style","z-index:auto;");".

How to remove z-index style in jquery

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

z-index attribute sets the stacking order of elements. Elements with a higher stacking order will always appear in front of elements with a lower stacking order.

<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>

<body>
<h1>这是一个标题</h1>
<img  class="x" src="img/eg_mouse.jpg" / alt="How to remove z-index style in jquery" > 
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>

</html>

Copy after login

How to remove z-index style in jquery

So how to remove z-index style in jquery

In jquery, you can use css() or attr() Method to remove the z-index style of an element.

Method 1. Use css() to remove the z-index style of the element

The css() method can set one or more style attributes of the selected element.

You only need to use css() to set the value of the z-index attribute to the default value "auto"; in this way, the stacking order of the specified element will be equal to that of the parent element.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.6.3.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("img").css("z-index","auto");
				});
			});
		</script>
		<style type="text/css">
			img {
				position: absolute;
				left: 0px;
				top: 0px;
				z-index: -1;
			}
		</style>
	</head>

	<body>
		<h1>This is a heading</h1>
		<img  src="img/eg_mouse.jpg.jpg" / alt="How to remove z-index style in jquery" >
		<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p><br /><br /><br />
		<button id="but1">删除z-index样式，让图片在文字前</button> 
	</body>
</html>

Copy after login

How to remove z-index style in jquery

Method 2. Use the attr() method to remove the z-index style of the element

attr() method can set the attribute value of the selected element .

You only need to use attr() to set the value of the z-index attribute to the default value "auto"; in this way, the stacking order of the specified element will be equal to the parent element.

<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("button").click(function() {
			$("img").attr("style","z-index:auto;");
		});
	});
</script>

Copy after login

How to remove z-index style in jquery

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

The above is the detailed content of How to remove z-index style in jquery. For more information, please follow other related articles on the PHP Chinese website!