前端开发入门到进阶第三集【js高度计算公式】

阅读量：4583 次

发布时间：2019-06-09

本文共 7608 字，大约阅读时间需要 25 分钟。

　　　　　　　　//导航条长度： document.body.clientHeight

　　　　　　　　var viewContentH = document.body.clientHeight;//https://www.cnblogs.com/easirm/p/4205155.html

　　　　　　　　console.log("conViewH" + conViewH);

console.log("viewContentH=" + viewContentH );            $(doc).scroll(function(){                //导航条顶部高度                var scrollTop = $(this).scrollTop();                console.log("window scrollTop=" + scrollTop);                var viewBtm = scrollTop + viewContentH;                console.log("contentBtm=" + contentBtm);                console.log("viewBtm=" + viewBtm);                if(contentBtm <= viewBtm){                    console.log("ajax");                }                console.log("");            })            console.log("");        })(document);

超级全面学习：https://www.cnblogs.com/easirm/p/4205155.html

IE中：

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

FireFox中：

document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

Opera中：

document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

没有定义W3C的标准，则

IE为：

document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

(注意：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

HTML精确定位：scrollLeft、scrollWidth、clientWidth、offsetWidth

scrollWidth ==> 获取对象的滚动宽度

scrollHeight ==> 获取对象的滚动高度

scrollLeft ==> 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（
被卷去的左）

scrollTop ==> 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离（
被卷去的高）

offsetLeft ==> 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop ==> 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetHeight ==> 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

event.clientX ==> 相对文档的水平座标

event.clientY ==> 相对文档的垂直座标

event.offsetX ==> 相对容器的水平坐标

event.offsetY ==> 相对容器的垂直坐标

document.documentElement.scrollTop ==> 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop ==> 相对文档的水平座标+垂直方向滚动的量

实现代码：

01    03    04    05    请调整浏览器窗口 
        06    07    08    请调整浏览器窗口大小
        
09    
        
         10    
         11    浏览器窗口 的 实际高度: 
         
         
12    浏览器窗口 的 实际宽度: 
         
         
13    
        
14    54    55

View Code

附 HTML 测试代码：

01    02    03    04    属性值测试05    
        06    
        07    25    26    29    30    31        
        
         32            
         
          33                div1,div1,div1,div1,div1,div1,div1,div1,div1,34                div1,div1,div1,div1,div1,div1,div1,div1,div1,div135            
         
36            
         
          37                div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,38                
          
39                div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,40                
          
41                div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,42                
          
43                div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,44                
          
45                div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,46            
         
47        
        
48    49

View Code

汇总

01    浏览器视口的高度02    function windowHeight() {03        var myHeight = 0;04        if (typeof(window.innerHeight) == 'number') {05            //Non-IE06            myHeight = window.innerHeight;07        } else if (document.documentElement && (document.documentElement.clientHeight)) {08            //IE 6+ in 'standards compliant mode'09            myHeight = document.documentElement.clientHeight;10        } else if (document.body && (document.body.clientHeight)) {11            //IE 4 compatible12            myHeight = document.body.clientHeight;13        }14        return myHeight;15    }16    /浏览器视口的宽度17    function windowWidth() {18        var myWidth = 0;19        if (typeof(window.innerWidth) == 'number') {20            //Non-IE21            myWidth = window.innerWidth;22        } else if (document.documentElement && (document.documentElement.clientWidth)) {23            //IE 6+ in 'standards compliant mode'24            myWidth = document.documentElement.clientWidth;25        } else if (document.body && (document.body.clientWidth)) {26            //IE 4 compatible27            myWidth = document.body.clientWidth;28        }29        return myWidth;30    }31    /**** 浏览器垂直滚动位置 ****/32    function scrollY() {33        var de = document.documentElement;34        return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;35    }36     37    /**** 浏览器水平滚动位置 ****/38    function scrollX() {39        var de = document.documentElement;40        return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;41    }42     43    /**** 当前页面高度 ****/44    function pageHeight() {45        return document.body.scrollHeight;46    }47     48    /**** 当前页面宽度 ****/49    function pageWidth() {50        return document.body.scrollWidth;51    }

转载：https://www.cnblogs.com/lwwen/p/7272698.html

说这几个属性前我说一下我的设备

我的设备有两个，一个高度为1080的显示器，一个高度为800的电脑

第一种：window.screen.height

这个方法是获取用户电脑屏幕的高度，是不关浏览器或者顶部工具栏跟底部工具栏的高度的

当我在高度为1080的我的显示屏屏幕上打印

window.screen.height1080

当我在我的电脑上打印

window.screen.height800

是的，这个属性就是电脑的高度

第二个属性：window.screen.availHeight

这个属性，看字面意思，顾名思义，就是电脑屏幕的可用高度，

那当然就是电脑屏幕减掉顶部工具栏跟底部工具栏的高度

我在显示器上打印了这个属性，会得到以下

window.screen.availHeight 1057

1057是等于=1080(电脑屏幕)-23(顶部工具栏)

因为我的显示器上面没有底部工具栏

好，现在我在我的电脑上打印

window.screen.availHeight714

是714=800-顶部工具栏(22)-底部工具栏(64)

第三个：document.body.clientHeight

这个属性只跟浏览器的高度有关

当时我在显示器上打印的时候，我打印来

document.body.clientHeight3367

我一脸懵逼，这怎么会有三千多高度呢

我屏幕一共才1080

后来我才想通，是浏览器里面的整个页面高度，因为我打开一个页面调试的时候是有滚动条的

第四个:document.documentElement.clientHeight

这个属性就是只跟浏览器有关，是浏览器里面的页面的可用可见高度

就还是我刚才那个显示器打印

document.documentElement.clientHeight880

是的我想说的就是这些了，反正我研究了一下这个之后，对这几个获得高度的属性差不多知道了

还有什么的话欢迎各位补充哦

第五个：window.innerHeight

转载：https://blog.csdn.net/u013749051/article/details/90182233

滚动条与要滚动的页面之间有如下关系：

这样，滚动条各种参数就好算了。

转载：https://blog.csdn.net/github_38589282/article/details/73823133

js计算滚动条长度&位置，用于自己绘制滚动条

做页面时，经常会遇到的一个问题：一个元素设置为overflow:scroll，内部有滚动条，在元素内部滚动滚轮，当其滚动条到底时，整个页面的滚动也开始了。

有时我们只希望滚动在子元素中有效，整个页面不要动。经常会用到$("body").css("overflow","hidden")，这个样式生效后，页面确实暂时不能滚动了，但是滚动条也消失了。不光看起来不舒服，页面的宽度还会变化。

解决这个问题的一个方法是，自己绘制一个滚动条，填充在原来的位置。这里的难点在于获取滚动条滑块的长度和位置。有一种方式可以近似地计算这两个值。虽然不十分准确，看起来也差不多了。

长度：

$(window).height()/document.body.clientHeight*$(window).height()

高度：

document.body.scrollTop/document.body.clientHeight*$(window).height()

注意，在IE中不一定有效。

转载于:https://www.cnblogs.com/lirenhe/p/11195734.html

你可能感兴趣的文章

CentOS 系统中安装 ArcGIS Server10.1 一些问题及解决

查看>>

asp.net里登陆记住密码

查看>>

【BZOJ】2190 [SDOI2008]仪仗队（欧拉函数）

查看>>

线性规划中的单纯形法与内点法（原理、步骤以及matlab实现）（一）

查看>>

简单DP【p2758】编辑距离

查看>>

Spring Data JPA：关联映射操作

katalon系列八：Katalon Studio图片识别

查看>>

Spring操作指南-针对JDBC配置声明式事务管理（基于XML）

查看>>

sql server 调优----索引缺失

查看>>

spring + junit 测试

查看>>

.net core 无法获取本地变量或参数的值，因为它在此指令指针中不可用，可能是因为它已经被优化掉了...

Spring 3.x jar 包详解与依赖关系

查看>>

java线程详解二

查看>>

maven项目导入依赖jar包并打包为可运行的jar包

查看>>