js 获取高度
网页可见区域宽 :document.body.clientWidth;
网页可见区域高:document.body.clientHeight;
网页可见区域高: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;
(scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。)
这是一个很复杂的问题,让我们想像一下:
- document.documentElement.scrollWidth
- document.documentElement.offsetWidth
- document.documentElement.clientWidth
- document.body.scrollWidth
- document.body.offsetWidth
- document.body.clientWidth
有 6 个属性要测,这 6 个属性要放在 4 种情况中:
- 没有指定 DOCTYPE,网页内容没有超过窗口宽度;
- 没有指定 DOCTYPE,网页内容超过窗口宽度;
- 指定 DOCTYPE,网页内容没有超过窗口宽度;
- 指定 DOCTYPE,网页内容超过窗口宽度;
然后这 4 种情况要放到几个主流浏览器中,假设只有 3 种浏览器:
- IE
- Firefox
- Chrome
算一下,6 * 4 * 3,有 72 种情况要测试,天啊。并且不要指望 Firefox 和 Chrome 结果是一样的,不要指望 Firefox 不会出现让您费解的结果,所以这真是一件恼火的事。
从应用入手简化分析
72 种测试情况确实很恼火,但我们回过头来一想,我们到底想要什么?
我认为我们想要两个东西:
- 一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
- 二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。
测试结果
结果很复杂,就不说了,这里只说实际中怎么使用:
- 要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
- 要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。
表达式为:
- var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
- var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
程序员的基础教程:菜鸟程序员
js 获取高度的更多相关文章
- js获取高度和宽度
CreateTime--2017年7月24日10:15:47Author:Marydon js获取高度和宽度 参考连接:http://www.cnblogs.com/EasonJim/p/6229 ...
- js获取高度
转载请注明来源:https://www.cnblogs.com/hookjc/ <script> function getInfo() { var s = ""; s ...
- js获取浏览器高度
常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...
- js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- JS获取浏览器高度 并赋值给类
在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...
- 原生js获取Html元素的实际宽度高度
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- js获取浏览器当前窗口的高度长度
js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
随机推荐
- nodejs中https请求失败,无报错
今天群里一位同学在做练习的时候,采用https例子: // curl -k https://localhost:8000/ const https = require('https'); const ...
- a标签解析url
var url = 'http://127.0.0.1:8080/index.jsp?username=admin#name'; var aLink = document.createElement( ...
- python应用之爬虫实战2 请求库与解析库
知识内容: 1.requests库 2.selenium库 3.BeautifulSoup4库 4.re正则解析库 5.lxml库 参考: http://www.cnblogs.com/wupeiqi ...
- CentOS7.3下yum练手安装Nginx
安装Nginx # 查看相关信息 yum info nginx yum info httpd # 移除 httpd,也就是 Apache yum remove httpd -y # 安装 nginx ...
- Win10交换Ctrl和大写键
打开注册表 [HKEY_LOCAL_MacHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout] "Scancode Map" ...
- MySQL中使用BIT属性
如果是组合类型,用bit比较好,有那个类型,就将那以为设为1即可.不然还有将所有类型的组合求出来用map来存对应数字. 用bit,即省空间又方便. 注意用bit不能直接在记录里面直接填数据,要通过sq ...
- MySQL优化十大技巧
转自:https://m.2cto.com/database/201701/557910.html MYSQL优化主要分为以下四大方面: 设计:存储引擎,字段类型,范式与逆范式 功能:索引,缓存,分区 ...
- 字符串和JSON对象互转的方法
采用Ajax的项目开发过程中,经常需要将JSON格式的字符串返回到前端,前端解析成JS对象(JSON ).字符串转JSON对象 1.eval方式解析.function strToJson(str){ ...
- Spring MVC 异常处理 - DefaultHandlerExceptionResolver
对一些特殊的异常进行处理,比如方法类型不匹配, 转换错误.
- springmvc @valid
JSR303是javaEE6中的一个子规范:Bean Validation.官方实现是HibernateValidatior.校验: 使用springmvc 的validate机制,需要引入valid ...