w3shools를 보다가 offsetParent()함수의 기능이 이해가 안가서 찾아보았다.
jquery홈페이지에서 찾아보니 금방 알 수 있어 좋구나.
http://docs.jquery.com/Traversing/offsetParent
offsetParent()는 첫번째로 매칭되는 부모를 선택한다. 선택의 기준은 가장 가까운 위치에 있는 position(relative or absolute)을 가지고 있는 부모를 말한다.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
});
</script>
</head>
<body>
<div style="width:70%;position:absolute;left:100px;top:100px">
<div style="margin:50px;background-color:yellow">
<p>Click button to set the background color of the first positioned parent element of this paragraph.</p>
<button>Set background-color</button>
</div></div>
</body>
</html>
위 코드의 경우는 버튼을 클릭하면 <div style="width:70%;position:absolute;left:100px;top:100px"> 부분의 색이 바뀌게 된다. 여기서 조금 수정해서 position을 빼고 body에 적용하면 body의 바탕색이 바뀌게 된다. 그건 버튼의 부모중에 position을 가진 태그가 body밖에 없기 때문이다.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").offsetParent().css("background-color","red");
});
});
</script>
</head>
<body style="width:70%;position:absolute;left:100px;top:100px">
1111
<div>
2222
<div style="margin:50px;background-color:yellow">
<p>Click button to set the background color of the first positioned parent element of this paragraph.</p>
<button>Set background-color</button>
</div></div>
</body>
</html>
이렇게 하면 body의 바탕색이 바뀌게 된다. 하지만... CSS에 약해서 정확한 용도는 모르겠다... CSS부분도 공부해봐야하나.... ㅠㅠ
'Javascript > jQuery' 카테고리의 다른 글
| 단축키를 눌러 특정위치로 이동 (0) | 2012.11.22 |
|---|---|
| 레이어를 화면 중앙에 띄우기 (0) | 2012.11.08 |
| 이벤트 처리(펌) (0) | 2012.10.04 |
| ajax 사용해보자. (0) | 2012.09.26 |
| jQuery 기초 (0) | 2012.09.20 |