SeouliteLab

jQuery .offsetParent() 메소드: 위치 기준이 되는 부모 요소 찾기 본문

프로그래밍

jQuery .offsetParent() 메소드: 위치 기준이 되는 부모 요소 찾기

Seoulite Lab 2024. 4. 9. 08:41

예제 1: offsetParent() 메소드 사용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .offsetParent() 예제</title>
  <style>
    #container {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
    }

    #inner {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var parent = $("#inner").offsetParent();
      console.log(parent.attr("id"));
    });
  </script>
</head>
<body>

<div id="container">
  <div id="inner"></div>
</div>

</body>
</html>

설명:

이 예제에서는 jQuery .offsetParent() 메소드를 사용하여 위치 기준이 되는 부모 요소를 찾는 방법을 보여줍니다.

  • #inner 요소는 #container 요소 내에 위치하며, position 속성이 absolute로 설정되어 있습니다.
  • .offsetParent() 메소드를 사용하여 #inner 요소의 위치 기준이 되는 부모 요소를 찾습니다.
  • 반환된 부모 요소의 ID를 콘솔에 출력하여 확인합니다.

예제 2: 부모 요소의 스타일 변경하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery .offsetParent() 예제</title>
  <style>
    #container {
      position: relative;
      width: 300px;
      height: 200px;
      border: 1px solid #ccc;
    }

    #inner {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var parent = $("#inner").offsetParent();
      parent.css("background-color", "lightgreen");
    });
  </script>
</head>
<body>

<div id="container">
  <div id="inner"></div>
</div>

</body>
</html>

설명:

이 예제에서는 .offsetParent() 메소드로 찾은 부모 요소의 스타일을 변경하는 방법을 보여줍니다.

  • #inner 요소의 위치 기준이 되는 부모 요소를 .offsetParent() 메소드를 사용하여 찾습니다.
  • 찾은 부모 요소의 배경색을 lightgreen으로 변경합니다.

jQuery .offsetParent() 메소드를 사용하면 요소의 위치 기준이 되는 부모 요소를 쉽게 찾을 수 있습니다. 이를 통해 요소가 어디에 위치하는지를 정확히 파악하고, 필요한 경우 부모 요소의 스타일이나 속성을 변경할 수 있습니다. 위 예제를 통해 .offsetParent() 메소드의 활용법을 익혀보세요.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery.browser: 브라우저 정보 확인하기  (0) 2024.04.09
jQuery .context 속성: 이벤트 처리 및 선택된 요소의 컨텍스트 확인하기  (0) 2024.04.09
jQuery .size() 메소드: 요소의 개수 확인하기  (0) 2024.04.09
jQuery.param() 메소드: 객체를 쿼리 문자열로 변환하기  (0) 2024.04.09
jQuery.noConflict() 메소드: jQuery 충돌 회피하기  (0) 2024.04.09
'프로그래밍' Related Articles more