jquery에서 z-index 스타일을 제거하는 방법
- 青灯夜游원래의
- 2023-01-28 14:13:291630검색
jquery에서 z-index 스타일을 제거하는 방법: 1. 제거하려면 css()를 사용하고 z-index 속성 값을 기본값 "auto"로 설정하면 됩니다. 구문은 "$("selector")입니다. css ("z-index","auto");"; 2. attr()을 사용하여 z-index 속성 값을 기본값 "auto"로 설정합니다. 구문은 "$("selector").attr입니다. ("스타일","z-색인:자동;");".
이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.
z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.
<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="jquery에서 z-index 스타일을 제거하는 방법" >
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
jquery에서 z-index 스타일을 제거하는 방법
jquery에서는 css() 또는 attr() 메서드를 사용하여 요소의 z-index 스타일을 제거할 수 있습니다.
방법 1. css()를 사용하여 요소의 Z-색인 스타일을 제거합니다.
css() 방법은 선택한 요소의 하나 이상의 스타일 속성을 설정할 수 있습니다.
이 방법으로 z-index 속성의 값을 기본값 "auto"로 설정하려면 css()만 사용하면 됩니다. 그러면 지정된 요소의 스택 순서가 상위 요소와 동일해집니다.
<!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="jquery에서 z-index 스타일을 제거하는 방법" >
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p><br /><br /><br />
<button id="but1">删除z-index样式，让图片在文字前</button>
</body>
</html>
메서드 2. attr() 메소드를 사용하여 요소의 z-index 스타일을 제거합니다.
attr() 메소드는 선택한 요소의 속성 값을 설정할 수 있습니다.
이 방법으로 z-index 속성의 값을 기본값 "auto"로 설정하려면 attr()만 사용하면 됩니다. 이렇게 하면 지정된 요소의 스택 순서가 상위 요소와 동일해집니다.
<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>
【추천 학습: jQuery 동영상 튜토리얼, 웹 프론트엔드 동영상】
위 내용은 jquery에서 z-index 스타일을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!