jquery如何去除z-index样式

发布时间：2023-07-21 11:00:34 所属栏目：教程来源：转载

导读： 　　本篇内容主要讲解“jquery如何移除z-index样式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何移除z-index

　　本篇内容主要讲解“jquery如何移除z-index样式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何移除z-index样式”吧!

　　jquery移除z-index样式的方法：1、利用css()移除，只需将z-index属性的值设置为默认值“auto”即可，语法“$("选择器").css("z-index","auto");”；2、利用attr()将z-index属性的值设置为默认值“auto”即可，语法“$("选择器").attr("style","z-index:auto;");”。

　　z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

　　<html>

　　<head>

　　<style type="text/css">

　　img.x

　　{

　　position:absolute;

　　left:0px;

　　top:0px;

　　z-index:-1

　　}

　　</style>

　　</head>

　　<body>

　　<h2>这是一个标题</h2>

　　<img class="x" src="img/eg_mouse.jpg" />

　　<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

　　</body>

　　</html>

　　那么jquery怎么移除z-index样式

　　在jquery中，可以利用css()或attr()方法来移除元素的z-index样式。

　　方法1、利用css()移除元素的z-index样式

　　css() 方法可设置被选元素的一个或多个样式属性。

　　只需要将利用css()将z-index属性的值设置为默认值“auto”即可；这样指定元素的堆叠顺序与父元素就相等了。

　　<!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>

　　 <h2>This is a heading</h2>

　　 <img src="img/eg_mouse.jpg.jpg" />

　　 <p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p><br /><br /><br />

　　 <button id="but1">删除z-index样式，让图片在文字前</button>

　　 </body>

　　</html>

　　方法2、利用attr()方法移除元素的z-index样式

　　attr() 方法可设置被选元素的属性值。

　　只需要将利用attr()将z-index属性的值设置为默认值“auto”即可；这样指定元素的堆叠顺序与父元素就相等了。

　　<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>

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!