js定位网页与网页元素的绝对位置
2011-09-22 15:29
387 查看
下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的绝对大小和相对大小 首先,要明确两个基本概念。 一张网页的全部面积,就是它的绝对大小。通常情况下,网页的绝对大小由内容和CSS样式表决定。 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口)。 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页。 (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的绝对大小和相对大小是相等的。 二、获取网页的相对大小 网页上的每个元素,都有clientHeight和clientWidth属性,利用它们就可以得到网页的相对大小。这两个属性代表的大小,是指元素的内容部分再加上padding的大小,但是不包括border和滚动条占用的空间。 (图二 clientHeight和clientWidth属性) 因此,document元素的clientHeight和clientWidth属性,就代表了网页的相对大小。 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 } } } 上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候,有三个地方需要注意: 1)这个函数必须在页面加载完成后才能运行,否则document对象还没生成,浏览器会报错。 2)大多数情况下,都是document.documentElement.clientWidth返回正确值。但是,在IE6的quirks模式中,document.body.clientWidth返回正确的值,因此函数中加入了对文档模式的判断。 3)clientWidth和clientHeight都是只读属性,不能对它们赋值。 三、获取网页的绝对大小 document对象的scrollHeight和scrollWidth属性就是网页的绝对大小,意思就是滚动条滚过的所有长度和宽度。 仿照getViewport()函数,可以写出getPagearea()函数。 function getPagearea(){ if (document.compatMode == “BackCompat”){ return { width: document.body.scrollWidth, height: document.body.scrollHeight } } else { return { width: document.documentElement.scrollWidth, height: document.documentElement.scrollHeight } } } 但是,这个函数有一个问题。前面说过,如果网页内容能够在浏览器窗口中全部显示,不出现滚动条,那么网页的绝对大小与相对大小应该相等,即 clientWidth和scrollWidth应该相等。但是实际上,不同浏览器有不同的处理,这两个值未必相等。所以,我们需要取它们之中较大的那个值,因此要对getPagearea()函数进行改写。 function getPagearea(){ if (document.compatMode == “BackCompat”){ return { width: [...]
相关文章推荐
- js 获取元素标签的绝对定位位置
- js获取元素在浏览器中的绝对位置
- js网页定位,window,body元素的定位属性
- js 元素绝对位置
- Firefox 浏览器对 TABLE 中绝对定位元素包含块的判定有错误,某些情况下会导致绝对定位元素位置跟其他浏览器中有差异
- js获取元素在浏览器中的绝对位置
- JS中获取 DOM 元素的绝对位置实例详解
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- 具有绝对定位的标签元素使用原生js获取其left,top的值
- js获得元素绝对或相对位置
- js获取触发事件元素在整个网页中的绝对坐标(示例代码)
- JS实现设置ff与ie元素绝对位置的方法
- js网页定位,window,body元素的定位属性
- 获取网页元素的绝对位置
- JS实现设置ff与ie元素绝对位置的方法
- js 实现ff与ie元素的绝对位置
- js在页面搜索定位某一元素的位置
- js求任意元素的绝对位置
- 绝对定位 absolute由于不占位置,会与后一个元素重叠在一起,并且会往上找有定位的元素的起点,相对定位则会占有位置。
- 获取定位元素相对于浏览器窗口的绝对位置