网页制作技巧:获取页面可视区域的高度

文章简介:获取页面可视区域高度,获取页面高度,获取滚动条滚动上去的页面高度.

function getWH(){
var wh = {};
"Height Width".replace(/[^\s]+/g,function(a){
var b = a.toLowerCase();
wh[b]=window["inner".concat(a)]
document.compatMode ==="CSS1Compat" && document.documentElement["client".concat(a)]
document.body["client".concat(a)];
});
return wh;
}
了解两个名词:BackCompat 标准兼容模式关闭(怪异模式)
CSS1Compat 标准兼容模式开启
这个方法为获取页面可视区域的高度,普通情况下,window.innerHeight 即可获取,如果是正常模式,并且有clientHeight的情况下, document.documentElement.clientHeight 获取的就是可视区域高度。在怪异模式下,是使用document.body获取。

function getBodyWH(){
var wh = {};
"Height Width".replace(/[^\s]+/g,function(a){
var b = a.toLowerCase();
wh[b]=document.compatMode ==="CSS1Compat" && document.documentElement["scroll".concat(a)]
document.body["scroll".concat(a)];
});
return wh;
}

这个为获取页面的高度,用于iframe的自适应时候获取。

var ss = {};

ss.scrollTopFn = function(arg){
var a = navigator.userAgent.toLowerCase().indexof("webkit");//判断webkit内核
var scrollTop;
if(a>-1document.compatMode =="BackCompat"){
this.scrollTopFn =function(arg){
if(typeof arg == 'number'){
document.body.scrollTop = arg;
}else{
return document.body.scrollTop;
}
}
}else{
this.scrollTopFn =function(arg){
if(typeof arg == 'number'){
document.documentElement.scrollTop = arg;
}else{
return document.documentElement.scrollTop;
}
}
}
return this.scrollTopFn.apply(this,arguments);
}

这个返回scrollTop 即滚动上去的页面的高度,因为在webkit内核下渲染的都是使用body,所以和上面两个判断是不一样的。在怪异模式下同样是用body。其他情况都是用documentElment。
这些玩意蛮烦的,今天弄了一天才总结出来了这么些,网上查找也没找到特别标准的说法,就一个个自己试了下,写了几个函数以供以后使用。有人如果有更好的判断方法的话,还望告知,谢谢!

时间: 2024-12-31 17:20:50

网页制作技巧:获取页面可视区域的高度的相关文章

网页制作技巧:数据过多时不会影响页面布局

文章简介:网页制作技巧:数据过多时不会影响页面布局. 着网站的迅速发展,对用户交互体验需要也越来越高,web前端开发者需要考虑更多,怎样通过前端的控制,让用户数据更高效的显示.要达到的目标是:数据过多时,不会影响页面布局解决方法:1,在不影响布局的情况下,可以选择,数据自动换行a.设置宽度限制:可以使用width值和max-width最大宽度值.b.内容自动换行:word-wrap:break-word(中文,英文语句,长串字母都能实现);注意点:长串字母实现前提,必须将宽度限制直接添加到"文本

DIVCSS网页设计总结:有用的3个网页制作技巧

网页制作Webjx文章简介:DIVCSS网页设计总结:有用的3个网页制作技巧. 我们在进行DivCSS布局的时候,非常关注CSS技巧的学习,今天向大家推荐3个所谓的 "顶级"CSS技巧!虽然没有什么新意,但对新手而言却非常重要! 一.在一行内声明CSS h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}  h2 {  font-size:18px;  border:1px soli

Javascript网页制作技巧:图片列表自适应宽度显示

文章简介:从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 从事网页重构好几年了,Javascript能力一直比较菜,主要还是做得太少.为了提高这方面的能力,这段时间主动承担了一些这方面的工作,真心感到学习和积累的不易,不过时常伴随着一些解决问题之后的小小成就感又让人乐此不疲. 在近期一个项目中,遇到一个图片列表自适应宽度显示的

巧妙运用Dreamweaver进行网页制作技巧

dreamweaver|技巧|网页 巧妙运用DW进行网页制作技巧--熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style.虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同. 1.灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用

网页制作技巧24条

01.让背景图不滚动 IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动: 〈Body Background="图片文件" bgproperties="fixed"〉 02.让你的网页无法另存为 <noscript><iframe alt=网页制作技巧24条 src=*></iframe></noscript> 03.让IFRAME框架内的文档的背景透明 <iframe alt=网页

JavaScript获取窗口可视区域的宽高的例子

在jQuery中我们很容易就可以获取整个浏览器窗口可视区域的宽高:  代码如下 复制代码 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括bo

【转】JS获取浏览器可视区域的尺寸

from: http://www.xiaoboy.com/detail/1341545044.html          所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下:

CSS网页制作技巧:IE浏览器下li的默认高度问题

文章简介:CSS网页制作技巧:IE浏览器下li的默认高度问题. 昨天,在家打开IE7浏览器看"视频导航网"的时候,发现居然有排版错误. 用F12开发者工具看了下,发现 li 的默认高度既然不统一? 用工具看了下,发现火狐高度解析统一为33px,而IE7解析高度根据字的不一样,默认解析的高度为30px,纯数字的解析高度为31px;中英文组合的解析高度为32px; 解决方法一:给LI设置高度后,IE7正常了,但IE6问题依然存在.原来,LI里面还嵌套着A标签,给A也设置一个高度后问题解决.

CSS网页制作技巧:兼容主流浏览器的背景颜色透明

文章简介:CSS网页制作技巧:兼容主流浏览器的背景颜色透明. 以前都是用jquery来写背景透明,方法简单,但是有缺点,脚本没加载完时,背景颜色是不透明的.如果换成在css里写好的话,效果就很好了..transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } 上面的几个属性分别是: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持f