[ 자바스크립트 ] offsetParent 🕔 2016. 9. 19. 04:20
Use the Google Translate, if you want to read this page in your language.
But its translation is probably inaccurate.
☞ Go to the Google Translate.
여전히, 나는 'offsetParent'의 정확한 의미를 파악하지 못했다.
인터넷 여기저기에서 주워들은, 아니 주워읽은(^^) 내용들을 종합해보면,
어떤 태그의 'position'이 'absolute'이거나 'relative'으로 설정되어 있는 상태라면,
그 태그는, 자신 안에 포함된 모든 태그들의 'offsetParent'가 된다.
'absolute'도 'relative'도 아닌, 다른 값으로 설정을 했거나
'position' 자체를 설정하지 않은 상태라면,
그 태그를 포함하여, 태그 안에 들어있는 태그들까지,
그들의 'offsetParent'는 <body>이거나 <html>이다.
'offset'이라는 영어 단어 자체가 '인쇄'와 관련된 뜻을 담고 있으므로,
태그를 'display: none'으로 설정한 상태라면, 그 태그의 'offsetParent'이라는 것은 없다.
직접 테스트해 본 결과,
'position: fixed'의 경우, 그 태그의 'offsetParent'는
파이어폭스에서는 <body>이라고 나오고, 다른 브라우저에서는 'null'이라고 나온다.
테스트해 본 브라우저는 다음과 같다.
 |
 |
 |
 |
 |
| 11 | 48.0 | 53.0 | 39 | 5.1 |
아래 글에서는, 'position'의 설정에 따라, 'offsetParent'가 어떻게 달라지는지를 알 수 있다.
이 태그의 'offsetParent'를 알아보기 ( Find the 'offsetParent' of this tag.)
<body>
<blockquote>
<div>
<p id="Ptag">이 태그의 'offsetParent'를 알아보기 ( Find the 'offsetParent' of this tag.)</p>
</div>
</blockquote>
<button onclick="testing()"> 클릭하세요 </button>
<p id="demo"></p>
<script type="text/javascript">
function testing (){
var tag = document.getElementById( "Ptag" );
var parent = tag.offsetParent;
var text = ( parent === null ) ? "null" : parent.tagName;
document.getElementById( "demo" ).innerHTML = text;
}
</script>
</body>
아래 버튼을 누를때마다, 태그의 'position'이 바뀔 것이다. 또한, 'position'이 바뀐 후에, 'testing()' 함수가 실행될 것이다.
<p id="Ptag">의 'offsetParent'는 이다.
( The 'offsetParent' of <p id="Ptag"> is . )
아래 목록에서, 각 태그의 'position'을 선택한 후에 버튼을 누르면, 'position'이 바뀔 것이다.
<p id="Ptag">의 'offsetParent'는 이다. ( The 'offsetParent' of <p id="Ptag"> is . )
위에서 실행된 내용들을 정리하면 아래와 같다.
| <blockquote>의 position | <div>의 position | <p>의 position | <p>의 offsetParent |
|---|---|---|---|
| 설정 안함 | 설정 안함 | 설정 안함, absolute, relative | <body> |
| fixed | null Firefox에서는 <body> | ||
| absolute, relative, fixed | 설정 안함, absolute, relative | <div> | |
| fixed | null Firefox에서는 <body> | ||
| absolute, relative, fixed | 설정 안함 | 설정 안함, absolute, relative | <blockquote> |
| fixed | null Firefox에서는 <body> | ||
| absolute, relative, fixed | 설정 안함, absolute, relative | <div> | |
| fixed | null Firefox에서는 <body> |
이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요 *^^*
'JAVASCRIPT > 그외' 카테고리의 다른 글
| [ 미완성 ] getElementsByClassName (0) | 2017.02.28 |
|---|---|
| [ 자바스크립트 ] classList (0) | 2016.09.27 |
| [ 자바스크립트 ] removeChild() & childNodes() (0) | 2016.03.20 |
| [ 자바스크립트 ] Date.prototype.toISOString() (0) | 2016.01.29 |
| [ 자바스크립트 ] window.atob() & window.btoa() (0) | 2016.01.29 |