event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 请调整浏览器窗口大小... get" name="form1" id="form1"> <!...document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取窗口大小
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 ...要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要 深入Document内部对body进行检测;在DOM环境下...meta http-equiv="content-type" content="text/html; charset=gb2312"> 请调整浏览器窗口大小... get" name="form1" id="form1"> 大小,并存储在前述两个变量中。 (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth... event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...offsetWidth、clientHeight、offsetHeight均无关) function resize(){ var win = Ext.fly('窗体对象组件');//获得要调整的窗体...,注意这里先用Ext.fly的方式来获取组件 ,如果不行再换别的,如getCmp,get等 ...//然后参考 http://www.javaeye.com/topic/155981 这篇博客,来动态设定组件的大小 } window.onresize = resize; Ext.onReady
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在 IE下需要深入Document内部对body进行检测;在DOM环境下...http-equiv="content-type" content="text/html; charset=gb2312"> 请调整浏览器窗口大小... get" name="form1" id="form1"> 大小,并存储在前述两个变量中。 (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值.../xhtml1/DTD/xhtml1-transitional.dtd"> 请调整浏览器窗口...http-equiv="content-type" content="text/html; charset=gb2312"> 请调整浏览器窗口大小... get" name="form1" id="form1"> <!...document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取窗口大小
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 实现代码 1 3 4 5 6 请调整浏览器窗口...content-type" content="text/html; charset=gb2312"> 7 8 9 请调整浏览器窗口大小... 10 get" name="form1" id="form1"> 11 <!
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值...DTD/xhtml1-transitional.dtd”> 请调整浏览器窗口...content-type” content=”text/html; charset=gb2312″> 请调整浏览器窗口大小... get” name=”form1″ id=”form1″> <!...document.body.clientHeight)) winHeight = document.body.clientHeight; //通过深入Document内部对body进行检测,获取窗口大小
基本上是这两类: 1、页面中嵌了IFrame,希望Iframe不出现滚动条,大小刚刚和页面大小一样,这个基本方法,都是用页面的document.body.scrollHeight属性来完成的...其实我也是用Iframe,因为我的折叠菜单是用css+div实现的,没法用滚动条,所有我用一个Iframe来装它,当菜单过长时,由Iframe来显示滚动条。...所以我需要的刚好相反:我要让Iframe的大小刚好等于浏览器页面的大小。 理论上讲,document.body.clientHeight可以解决这个问题,但实际上不行。 ...最后,还是在cnblogs上找到了答案: http://dflying.cnblogs.com/archive/2006/03/27/360145.aspx 不由得再次感叹:一千个copy...嵌入式页面的JS代码可能不起作用。
它们的大小取决于元素的宽高、padding以及边框border,有无滚动条都没有影响,下面是他们的计算方式。...指的是offsetLeft只读属性返回当前元素左上角在offsetParent节点内向左偏移的像素数。...当不存在水平或垂直滚动条时,scrollWidth和scrollHeight等于clientWidth和clientHeight, 当存在水平或垂直滚动条时,请看下面演示(将div#sub-contetn...的height设为300px) 输出: 可以看到图中存在垂直方向的滚动条 scrollWidth=clientWidth=width+左右padding-滚动条宽度=203 scrollHeight...和scrollHeight等于clientWidth和clientHeight还是有很大联系的,当内容层的高宽度超过指定元素的高宽度时,scrollWidth和scrollHeight还得在clientWidth
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。...);”> 在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。...是对象看到的宽度(含边线,如滚动条的占用的宽) top、postop、scrolltop、scrollHeight、offsetHeight 1. top 此属性仅仅在对象的定位(position)属性被设置时可用...event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 clientWidth:是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。...event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX
总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。...2.2 实例 在页面中,溢出说得更加通俗一些就是有没有滚动条出现,出现了,说明子元素有一部分被父元素遮挡了,就溢出了,下面给出两个实例,一个没有溢出(没有滚动条),一个溢出了,分别观察他们的scrollWidth...> 打印结果为: 300 320 仍然是我给出的children的大小。...当我们拉动水平滚动条时,元素与视图就不再是左上角顶点重合了,水平之间是存在距离的(按左上角顶点重合计算),可以看到现在的scrollLef有了数值,因为没有移动垂直滚动条,因此垂直方向仍然是没有距离的。...当我将水平,垂直滚动条都拉到底部时,scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ,我设置的元素宽高分别为:200 180 ,视图(子元素)宽高分别为:300 320
当元素的 style.display 设置为 "none" 时,offsetParent 返回 null。...此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数(这个特性在chrome浏览器中不存在)。...若元素的宽度大于其内容的区域(例如,元素存在滚动条时), scrollWidth 的值要大于 clientWidth。...(document.documentElement || document.body.parentNode || document.body).scrollLeft; scrollY 返回文档/页面在垂直方向已滚动的像素值...,其中 pageYOffset 属性是 scrollY 属性的别名 var scrollX = window.scrollY; 完整的获取文档/页面在垂直方向已滚动的像素值的兼容性代码: var y =
偏移量 offsetWidth 元素在水平方向上占用的空间大小 包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度...offsetWidth=width+padding+border offsetHeight 元素在垂直方向上占用的空间大小 包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度...offsetTop 对象可视区域的宽度和高度 clientWidth,clientHeight clientWidth=width+padding 对象滚动宽度和高度 scrollWidth...,scrollHeight (对象的实际内容的宽度,不包边线宽度) 对象左侧和顶部滚动的距离 scrollLeft,scrollTop 滚动大小 scrollWidth:没有滚动条的情况下...document.body.offsetWidth (包括边线的宽); 网页可见区域高: document.body.offsetHeight (包括边线的宽); 网页正文全文宽: document.body.scrollWidth
event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX...onmousedown 当鼠标按下时。。 假设 obj 为某个 HTML 控件。...clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远...对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight...scrollWidth 也是类似道理。...clientTop: 这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 3.scrollLeft,scrollTop: 如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远...对于不可以滚动的元素,这些值总是0. 4.scrollHeight,scrollWidth: 不管有多少对象在页面上可见,他们得到的是整体. 5.style.left: 定位元素与包含它的矩形左边界的偏移量...clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
前面的话 前面两篇博文分别介绍过偏移大小、客户区大小。... scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分 [注意]IE7-浏览器返回值是不准确的 【1】没有滚动条时,scrollHeight与clientHeight...但是由于各个浏览器表现不一样,分为以下几种情况 【1】html元素没有滚动条时,IE和firefox的client和scroll属性始终相同,且返回可视区的尺寸大小;而safari和chrome表现正常...元素未滚动时,scrollTop的值为0,如果元素被垂直滚动了,scrollTop的值大于0,且表示元素上方不可见内容的像素宽度 scrollLeft scrollLeft属性表示被隐藏在内容区域左侧的像素数...如果当前元素在视口中可见,这个方法什么也不做 如果将可选的alignCenter参数设置为true,则表示尽量将元素显示在视口中部(垂直方向) [注意]该方法只有chrome和safari支持
event.offsetX相对容器的水平坐标 event.offsetY相对容器的垂直坐标 document.documentElement.scrollTop垂直方向滚动的值 event.clientX...以上属性在 FireFox 中也有效。...scrollWidth 也是类似事理。...重视.若是对象是包含在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有题目....哄骗这个属性,可以获得当前对象在不合大小的页面中的绝对地位.
此时,当你从右到左拖动滚动条时,scrollLeft会从0变为负数。 scrollLeft/Top在日常工作中是比较频繁使用关于操作滚动条的相关api,他们是一个可以设置的值。...例如,不论页面是否有垂直/水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX/Y 值都将为 0 。...在不出现滚动条时候Element.clientWidth/Height === Element.scrollWidth/Height Element.clientTop/clientLeft Element.clientLeft...我们来看看这张图: 计算元素距离 body 的偏移量 当我们需要获得元素距离 body 的距离时,但是又无法确定父元素是否存在定位元素时(大多数时候在组件开发中,并不清楚父节点是否存在定位)。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值,那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示,则滚动浏览器窗口,可以显示出网页的各个部分。...三、获取网页大小的另一种方法 网页上的每个元素还有scrollHeight和scrollWidth属性,指包含滚动条在内的该元素的视觉面积。...那么,document对象的scrollHeight和scrollWidth属性就是网页的大小,意思就是滚动条滚过的所有长度和宽度。...如果网页内容能够在浏览器窗口中全部显示,不出现滚动条,那么网页的clientWidth和scrollWidth应该相等。但是实际上,不同浏览器有不同的处理,这两个值未必相等。...滚动条滚动的垂直距离,是document对象的scrollTop属性;滚动条滚动的水平距离是document对象的scrollLeft属性。
领取专属 10元无门槛券
手把手带您无忧上云