Javascript 获取页面中元素的高度和宽度

最新推荐文章于 2024-04-11 16:16:12 发布

weixin_30566111

最新推荐文章于 2024-04-11 16:16:12 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/mmcai/archive/2012/08/07/2626225.html

版权

1、获取页面和元素可视高度，可视宽度值。

2、获取页面和元素实际的高度，实际的宽度的值。

3、获取滚动条的高度（页面滚动的高度）

第一种方法通过javascript来获取上面内容的值。

获取文档可视窗口大小：火狐，谷歌，欧朋浏览器提供了一个window.innerWidth和window.innerHeight方法来获取串口的可视大小。IE6以上的浏览器提供了一个document.documentElement.clientWidth和document.documentElement.clientHeight来获取文档可视窗口的大小，IE6以下使用document.body.clientWidth。但同时火狐，谷歌，欧鹏浏览器也支持document.documentElement.clientWidth方法，所以所有的浏览器可以统一使用document.documentElement.clientWidth来获取文档可视窗口的大小。

获取元素可视窗口的大小同样可以使用document. getElementById(“elem”).clientWidth。但是为了保证所有浏览器的兼容性,必须保证elem是块级元素，并且设置了宽高属性。

获取文档窗口实际大小：document.body.scrollWidth(窗口宽度)。Document.body.scrollHeight(窗口高度)。

获取文档滚动条的滚动的高度和宽度，左偏移，和上偏移：封装在一个函数scrollget()中

Function scrollget(){

Var w,h,t,l;

if (document.documentElement && document.documentElement.scrollTop) {

t = document.documentElement.scrollTop;

l = document.documentElement.scrollLeft;

w = document.documentElement.scrollWidth;

h = document.documentElement.scrollHeight;

}

else if (document.body) {

t = document.body.scrollTop;

l = document.body.scrollLeft;

w = document.body.scrollWidth;

h = document.body.scrollHeight;

} Return {w:w,h:h,t:t,l:l}

}

第二种方法我们通过jQuery框架来获取上面内容的值。

获取文档的实际高度和宽度：$(“body”).height()和$(“body”).width();

获取文档滚动的高度：$(document).scrollTop();

Jquery 获取可视窗口的大小方法本人没发现；

文档二：IE6中实现position:fixed。

Position：fixed定位在除了IE6下都能实现，是让元素始终固定显示在一个位置上面。但通常我们需要这个属性利用js做一些效果例如回到顶部，悬浮层，悬浮菜单。下面就让我们一切解决IE6下不能实现fixed属性的方法。

提起这个IE6 bug的时候很多人都会想到我们可以用position:absolute属性来实现IE6 下面这种情况。但是一开始我测试的时候_position:absolute;却并不能达到我们想要fixed的这种效果。后来在网上参考了一些文章知道了有一种实现方法。

方法一：

在页面中写上如下代码

<!—[if IE 6]>

<style>

Html{ overflow:hidden; }

Body{ overflow:auto; height:100%;}

#fixed{ position:absolute; top:100px; right:100px; }

</style>

<![endif]-->

其它浏览器直接写#fixed{ position:fixed; top:100px; right:100px;}

如果深入研究我们会发现这种代码是有弊端的那就是：这会使页面上原有的absolute、relation都变成fixed的效果.花了一些时间在网上搜寻其它的解决方法就找到了如下的第二种方法。

方法二：

先上代码：

/* 除IE6浏览器的通用方法 */

.ie6fixedTL{position:fixed;left:0;top:0}

.ie6fixedBR{position:fixed;right:0;bottom:0}

/* IE6浏览器的特有方法 */

.ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}

.ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

这种方法就是利用css表达式expression这种方法来计算距离的。上面的情况是没有考虑margin,padding,border的情况下，比如我要让某个元素距顶部10个像素，距左部也是10个像素，那就要这样子写：

.ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

这种情况下页面滚动的时候，这个层会抖动为了解决这个问题写上如下代码：

Body{ background:url(about:blank) fixed;}

IE6下仅在body的背景图片上才有fixed属性。

Css表达式影响性能，但是为了兼容IE6 有时候也是无可奈何。以上两种情况可以根据情况使用。

转载于:https://www.cnblogs.com/mmcai/archive/2012/08/07/2626225.html