元素的各种位置,偏移量,大小,滚动。
要想知道某个元素在页面上的偏移量,将这个元素的 offsetLeft 和 offsetTop 与其 offsetParent 的相同属性相加,如此循环直至根元素,就可以得到一个基本准确的值。以下两个函数就可以用于分别 取得元素的左和上偏移量。
function getElementLeft(element){ var actualLeft = element.offsetLeft; var current = element.offsetParent; while (current !== null){ actualLeft += current.offsetLeft; current = current.offsetParent; } return actualLeft; }
function getElementTop(element){ var actualTop = element.offsetTop; var current = element.offsetParent; while (current !== null){ actualTop += current. offsetTop; current = current.offsetParent; } return actualTop; }
客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内。
要确定浏览器 视口大小,可以使用 document.documentElement 或 document.body(在 IE7 之前的版本中)的 clientWidth 和 clientHeight。
function getViewport(){ if (document.compatMode == "BackCompat"){ return { width: document.body.clientWidth, height: document.body.clientHeight }; } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } }
在确定文档的总高度时(包括基于视口的最小高度时),必须取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。下面就 是这样一个例子。
var docHeight = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight); var docWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
下面这个函数会检测元素是否位 于顶部,如果不是就将其回滚到顶部。
function scrollToTop(element){ if (element.scrollTop != 0){ element.scrollTop = 0; } }
相关推荐
doITwhat 2015-07-09
dfBeautifulLive 2019-10-26
forrestou 2019-09-05
Kshine0 2015-07-09
jiaomrswang 2019-06-29
ElementW 2018-01-19
我只是个程序员 2015-06-29
沉着前进 2014-07-21
forrestou 2019-06-25
哈嘿Blog 2016-09-08
zzpdljd 2016-05-05
fkuevip 2016-04-05
前端档案 2015-04-14
PHP100 2019-03-27
BitTigerio 2018-01-31
编程爱好者联盟 2017-02-08