[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
相关推荐
05-offset,scroll,client.html
在本篇文章里小编给大家整理了关于js 元素offset,client , scroll 三大系列总结,有需要的朋友们可以学习下。
client和scroll应用; 元素可视区client;Client和scrool应用;Client和scrool应用;Client和scrool应用; 元素滚动scroll;Client和scrool应用;Client和scrool应用;Client和scrool应用;浮动广告设计;如何在页面上方显示...
HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第...
offsetTop 指元素距离上方或上层控件的位置,整型,单位像素。 offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素。 offsetWidth 指元素控件自身的宽度,整型,单位像素。 offsetHeight 指元素控件自身的...
在学习前端的过程中,我们经常会碰到offset, client与scroll,所以我就把它们称作为‘三剑客’。 01 offset – 偏移量 定义:元素在屏幕上占用的所有的可见的空间。 元素可见的大小由其高度、宽度决定,包括所有内...
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
主要介绍了JS前端知识点offset,scroll,client,冒泡,事件对象的应用,结合实例形式总结分析了offset,scroll,client,冒泡,事件对象相关功能、原理及操作注意事项,需要的朋友可以参考下
simplr-smoothscroll, 在所有浏览器中,平滑滚动 simplr-smoothscroll 演示程序要求jquery鼠标滚轮用法$(function () { $.srSmoothscroll({ // defaults step: 55, sp
smoothScroll.js 是极小的,符合标准的平滑滚动脚本,无依赖,支持 Firefox, Chrome, IE10, Opera 和 Safari。使用:[removed][removed]示例:var smoothScroll = require('smoothscroll'); var exampleBtn = ...
本课将带你学习前端开发中最重要的技术JavaScript,它是网页与用户进行交互的基石。...最后我们还会学习Jquery框架,以提高你的前端开发...学完本课后,你将能独立做出与用户有复杂交互(表单、动画、视频等)的网站效果。
js中的scroll和offset 使用比较的实例与分析.docx
jquery endlessEndless Scroll.rar jquery endlessEndless Scroll.rar
better-scroll.js
scroll 最基本例子 没有其他的杂质
一、函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**。有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效。 ### 1.如何...
jquery.infinitescroll滑动加载更多的demo小案例。。。。