[url=http://bbs.51js.com/misc.php?action=viewratings&tid=79014&pid=558512][/url]
标准、非标准,多游览器,client、offset、scroll等函数所有解析。
clientTop,clientLeft
clientWidth,clientHeight
offsetTop,offsetLeft
offsetWidth,offsetHeight
scrollTop,scrollLeft
scrollWidth,scrollHeight
自写JS类,需要考虑标准和非标准下使用的用户,又得考虑多游览器。
所以做了这个研究,DIV,HTML,BODY的结果都不相同,非常让人郁闷,
发出来做共巷研究。
所以结果发出。
HTML、BODY。测试。
窗体大小800*300
(表担心,我是用PS去测量的大小。)
Html css: margin:21px 22px 23px 24px;
Body css: margin:11px 12px 13px 14px;
有滚动状态时,将在BODY中增加Div为,大小800*300
Div。测试。
大小800*600,包括滚动条在内。
有滚动状态,DIV内增加DIV850*300
标准 显示滚动条 无滚动状态.
IE 7 Hmtl:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:800,300
scrollXY:0,0
scrollWH:800,248
IE 7 Body:
clientXY:0,0
clientWH:774,224
offsetXY:11,14
offsetWH:774,224
scrollXY:0,0
scrollWH:774,224
IE 6 Hmtl:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:800,220
IE 6 Body:
clientXY:0,0
clientWH:774,196
offsetXY:11,14
offsetWH:774,196
scrollXY:0,0
scrollWH:774,196
IE 5.5 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 5.5 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:800,220
FF 3 Hmtl:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:800,220
scrollXY:0,0
scrollWH:800,300
FF 3 Body:
clientXY:0,0
clientWH:774,196
offsetXY:0,0
offsetWH:774,196
scrollXY:0,0
scrollWH:774,196
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:800,300
offsetXY:0,0
offsetWH:800,234
scrollXY:0,0
scrollWH:800,300
FF 2 Body:
clientXY:undefined,undefined
clientWH:774,210
offsetXY:0,0
offsetWH:774,210
scrollXY:0,0
scrollWH:774,210
非标准 显示滚动条 无滚动状态.
IE 7 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:817,317
scrollXY:0,0
scrollWH:817,317
IE 7 Body:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:817,317
scrollXY:0,0
scrollWH:800,248
IE 6 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 6 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:800,220
IE 5.5 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 5.5 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:800,220
FF 3 Hmtl:
clientXY:0,0
clientWH:800,220
offsetXY:0,0
offsetWH:800,220
scrollXY:0,0
scrollWH:800,220
FF 3 Body:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:774,196
scrollXY:0,0
scrollWH:800,300
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:800,234
offsetXY:0,0
offsetWH:800,234
scrollXY:0,0
scrollWH:800,234
FF 2 Body:
clientXY:undefined,undefined
clientWH:800,300
offsetXY:0,0
offsetWH:774,210
scrollXY:0,0
scrollWH:800,300
标准,有滚动条,有滚动状态
IE 7 Hmtl:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:800,300
scrollXY:24,14
scrollWH:814,324
IE 7 Body:
clientXY:0,0
clientWH:774,300
offsetXY:11,14
offsetWH:774,300
scrollXY:0,0
scrollWH:800,300
IE 6 Hmtl:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:24,26
scrollWH:826,324
IE 6 Body:
clientXY:0,0
clientWH:800,300
offsetXY:11,14
offsetWH:800,300
scrollXY:0,0
scrollWH:800,300
IE 5.5 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 5.5 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:24,26
scrollWH:826,324
FF 3 Hmtl:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:800,324
scrollXY:24,14
scrollWH:814,324
FF 3 Body:
clientXY:0,0
clientWH:774,300
offsetXY:0,0
offsetWH:774,300
scrollXY:0,0
scrollWH:774,300
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:800,300
offsetXY:0,0
offsetWH:800,324
scrollXY:24,14
scrollWH:814,324
FF 2 Body:
clientXY:undefined,undefined
clientWH:774,300
offsetXY:0,0
offsetWH:774,300
scrollXY:0,0
scrollWH:774,300
非标准,有滚动条,有滚动状态
IE 7 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:817,317
scrollXY:0,0
scrollWH:817,317
IE 7 Body:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:817,317
scrollXY:24,26
scrollWH:826,324
IE 6 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 6 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:24,26
scrollWH:826,324
IE 5.5 Hmtl:
clientXY:0,0
clientWH:0,0
offsetXY:0,0
offsetWH:821,321
scrollXY:0,0
scrollWH:821,321
IE 5.5 Body:
clientXY:2,2
clientWH:800,300
offsetXY:0,0
offsetWH:821,321
scrollXY:24,26
scrollWH:826,324
FF 3 Hmtl:
clientXY:0,0
clientWH:800,324
offsetXY:0,0
offsetWH:800,324
scrollXY:0,0
scrollWH:800,324
FF 3 Body:
clientXY:0,0
clientWH:800,300
offsetXY:0,0
offsetWH:774,300
scrollXY:24,14
scrollWH:814,324
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:800,324
offsetXY:0,0
offsetWH:800,324
scrollXY:0,0
scrollWH:800,324
FF 2 Body:
clientXY:undefined,undefined
clientWH:800,300
offsetXY:0,0
offsetWH:774,300
scrollXY:24,14
scrollWH:814,324
Div无滚动 标准
IE 7 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:0,0
offsetWH:800,300
scrollXY:0,0
scrollWH:783,112
IE 6 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:0,0
offsetWH:800,300
scrollXY:0,0
scrollWH:783,98
IE 5.5 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:0,0
scrollWH:783,98
FF 3 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:8,8
offsetWH:800,300
scrollXY:0,0
scrollWH:783,283
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:784,284
offsetXY:8,8
offsetWH:800,300
scrollXY:0,0
scrollWH:784,284
Div无滚动 非标准
IE 7 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:0,0
scrollWH:783,112
IE 6 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:0,0
scrollWH:783,98
IE 5.5 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:0,0
scrollWH:783,98
FF 3 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:8,8
offsetWH:800,300
scrollXY:0,0
scrollWH:783,283
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:784,284
offsetXY:8,8
offsetWH:800,300
scrollXY:0,0
scrollWH:784,284
DIV有滚动 标准
IE 7 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
IE 6 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
IE 5.5 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:0,0
scrollWH:850,350
FF 3 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:8,8
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
FF 2 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:8,8
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
DIV有滚动 非标准
IE 7 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
IE 6 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
IE 5.5 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:15,10
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
FF 3 Hmtl:
clientXY:0,0
clientWH:783,283
offsetXY:8,8
offsetWH:800,300
scrollXY:67,67
scrollWH:850,350
FF 2 Hmtl:
clientXY:undefined,undefined
clientWH:784,284
offsetXY:8,8
offsetWH:800,300
scrollXY:66,66
scrollWH:850,350