jQuery의 position() method_jquery에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery의 position() method_jquery에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:49:39

원래의

1557명이 탐색했습니다.

position() 메소드 정의 및 사용법:

이 메소드는 일부 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다.

반환된 개체에는 두 개의 정수 속성(상단 및 왼쪽)이 있는 개체가 포함되어 있습니다.

이 방법은 눈에 보이는 요소에만 작동합니다.

문법 구조:

$(selector).position()

로그인 후 복사

튜토리얼 시작 부분에서 이 내용을 말한 이유는 일부 요소를 기준으로 일치하는 요소의 오프셋을 가져오기 위한 것입니다. 많은 튜토리얼에서는 메서드에서 반환된 오프셋이 상위 요소를 기준으로 한다고 말하지만 이는 전적으로 사실이 아닙니다. 물론 이 메서드는 일치하는 요소를 절대 위치 지정으로 처리한다는 의미는 아닙니다. 절대 위치. 이 방식의 오프셋 기준 원리는 다음과 같습니다.

1. 상위 요소가 위치 지정을 사용하지 않는 경우(위치 속성 값은 상대, 절대 또는 고정) 오프셋 참조 개체는 창입니다.

2. 상위 요소 중 위치 지정을 사용하는 경우 오프셋의 참조 개체는 위치 지정을 사용하는 가장 가까운 요소입니다.

예제 코드:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
*{
 margin:0px;
 padding:0px;
}
.father{
 background-color:green;
 width:200px;
 height:200px;
 padding:50px;
 margin-bottom:50px;
 margin-left:100px;
}
.children{
 height:150px;
 width:150px;
 background-color:red;
 line-height:150px;
 text-align:center;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".children").each(function(){
  var text;
  text="left:"+$(this).position().left;
  text+="top:"+$(this).position().top;
  $(this).text(text);
 })
})
</script>
</head>
<body>
<div class="father" style="position:relative">
 <div class="children"></div>
</div>
<div class="father">
 <div class="children"></div>
</div>
</body>
</html>

로그인 후 복사

위 코드의 상단 조합에서 상위 요소는 상대 위치 지정을 사용하므로 얻은 오프셋은 상위 요소를 기준으로 합니다. 하단 조합에서는 상위 요소가 위치 지정을 사용하지 않으므로 오프셋 참조 개체는 창입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.