offsetTop,offsetLeft
19205 단어 left
offsetTop은 섹션이나 offsetTop 속성에 의해 지정된 부모 좌표에 대한 계산 상단 위치를 가져옵니다
offsetLeft: 섹션이나 offsetParent 속성에 의해 지정된 부모 좌표에 대한 계산의 왼쪽 위치를 가져옵니다
IE67과 FF의offsetTop 해석 결과는 다르다. FF에서는offsetParent가body이고, IE67에서는offsetParent가부급 요소이다.
즉, elem.offsetTop=elem.offsetTop+elemFather.offsetTop+elemFatherFather.offsetTop......
호환성 쓰기:
function getOffset(el){
var _t =el.offsetTop;
while(el = el.offsetParent){
_t += el.offsetTop;
}
return _t;
}
while(el = el.offsetParent)
하면, 만약, 만약...offsetParent가 존재하면 그의 offsetTop을 더해서 offsetParent가 없을 때까지 순환한다.다음은 테스트의 예입니다.
1
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
3
<
head
>
4
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
/>
5
<
title
>
offsetTop,offsetParent
</
title
>
6
<
style
type
="text/css"
>
7
*
{
margin
:
0
;
padding
:
0
;
}
8
div
{
width
:
400px
;
margin-top
:
20px
;
background-color
:
#000
;
height
:
300px
;
overflow
:
hidden
}
9
p
{
margin-top
:
30px
;
background-color
:
#F00
;
height
:
200px
;
overflow
:
hidden
}
10
a
{
display
:
block
;
margin-top
:
100px
;
background-color
:
#fff
;
height
:
20px
;
}
11
</
style
>
12
</
head
>
13
14
<
body
id
="the_body"
>
15
<
div
id
="the_div"
>
16
<
p
id
="the_p"
>
17
<
a
href
="#"
id
="the_a"
>
offsetTop
</
a
>
18
</
p
>
19
</
div
>
20
<
script
type
="text/javascript"
>
21
function
getOffset(el){
22
var
_t
=
el.offsetTop;
23
var
n
=
0
;
24
while
(el
=
el.offsetParent){
25
_t
+=
el.offsetTop;
26
n
++
;
27
alert(
'
'
+
n
+
'
offsetParent
'
)
28
}
29
return
_t;
30
}
31
alert(getOffset(document.getElementById(
'
the_a
'
)));
32
alert(document.getElementById(
'
the_a
'
).offsetTop);
//
IE67 100， offsetTop
33
</
script
>
34
35
</
body
>
36
</
html
>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
innerjoin과 leftjoin 사이의 차이에 대한 상세한 설명innerjoin과 leftjoin 간의 차이에 대해 예전에는 자신이 이해한 줄 알았는데 오늘은 앞에서 파라미터를 찾았을 때 예상한 결과가 아니라는 것을 발견하고 innerjoin에서 문제가 발생했다는 것을 알게 되...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
