(知识点)JS获取网页高度
网页可见区域的宽:document.body.clientWidth
网页可见区域的高:document.body.clientHeight
网页可见区域的宽:document.body.offsetWidth(包括边线的宽)
网页可见区域的高:document.body.offsetHeight(包括边线的高)
网页正文全文的宽:document.body.scrollHeight
网页正文全文的高:document.body.scrollWidth
网页被卷去的高:document.body.scrollTop(IE8以下无效)
网页被卷去的左:document.body.scrollLeft(IE8以下无效)
网页被卷去的高:document.documentElement.scrollTop(IE8以下有效)
网页被卷去的左:document.documentElement.scrollLeft(IE8以下有效)
网页正文部分上:window.screenTop
网页正文部分做:window.scrollLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区的高度:window.screen.availHeight
屏幕可用工作区的宽度:window.screen.availWidth
相对于窗口左上角的X:window.event.clientX
相对于窗口左上角的Y:window.event.clientY
相对于整个页面的X:window.event.X
相对于整个页面的Y:window.event.Y
这里注意:
2级Dom没有提供把窗口坐标转化为文档坐标的标准方法。在IE浏览器以外,使用window.pageXOffset和window.pageYoffset即可
function getInfo() {
var s = "";
s += " 网页可见区域宽:" + document.body.clientWidth;
s += " 网页可见区域高:" + document.body.clientHeight;
s += " 网页可见区域宽:" + document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高:" + document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽:" + document.body.scrollWidth;
s += " 网页正文全文高:" + document.body.scrollHeight;
s += " 网页被卷去的高(ff):" + document.body.scrollTop;
s += " 网页被卷去的高(ie):" + document.documentElement.scrollTop;
s += " 网页被卷去的左:" + document.body.scrollLeft;
s += " 网页正文部分上:" + window.screenTop;
s += " 网页正文部分左:" + window.screenLeft;
s += " 屏幕分辨率的高:" + window.screen.height;
s += " 屏幕分辨率的宽:" + window.screen.width;
s += " 屏幕可用工作区高度:" + window.screen.availHeight;
s += " 屏幕可用工作区宽度:" + window.screen.availWidth;
s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色";
s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸";
console.log(s);
}
getInfo();
(知识点)JS获取网页高度的更多相关文章
- js获取网页高度(详细整理)
网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...
- JS获取网页高度和宽度
注:此文属于转载自他人博客 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
- js获取网页高度
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- js获取网页高度和宽度(备份)
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- js获取网页的各种高度
原文:js获取网页的各种高度 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: documen ...
- JS获取网页属性包括宽、高等
JS获取网页属性包括宽.高等. function getInfo() { // www.jbxue.com var s = ""; s += " 网页可见区域宽:&q ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- jquery、js获取页面高度宽度等
jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...
随机推荐
- Python总的字符串
Python总最常用的类型,使用单引号双引号表示.三引号之间的字符串可以跨多行并且可以是原样输出的. Python中不支持字符类型,字符也是字符串. ---字符串的CRUD [1:3] [:6] -- ...
- 微信JS初始化--微信JS系列文章(一)
概述 微信JS的使用方法,官方文档已经描述得比较清楚了,这里我就不重复介绍了,本文意在提供现成的代码,供大家快速迭代开发,以及补充一下官方文档描述得不够清楚的地方,避免大家踩相同的坑. 微信JS初始化 ...
- java学习(二)多态中成员变量详解
今天我总结了一下java多态中成员变量的赋值与调用 举一个我当初做过的小案例: class Fu{ int num; void show(){} } class Zi extends Fu{ //in ...
- 【记录】解析具有合并单元格的Excel
最近公司让做各种数据表格的导入导出,就涉及到电子表格的解析,做了这么多天总结一下心得. 工具:NOPI 语言:C# 目的:因为涉及到导入到数据库,具有合并单元格的多行必然要拆分,而NPOI自动解析的时 ...
- java与xml之间的转换(jaxb)
使用java提供的JAXB来实现java到xml之间的转换,先创建两个持久化的类(Student和Classroom): Classroom: package com.model; public cl ...
- JS-DOM . 01 简单了解DOM
DOM概述 html加载完毕,渲染引擎会在内存中把html文档生成一个DOM树,getElementById是获取内DOM上的元素,然后操作的时候修改的是该元素的属性 体验事件/事件三要素1.事件源( ...
- JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置
---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下 权重: 标签 1 : 类选择器 ...
- NPOI扩展--判断指定单元格是否为合并单元格和输出该单元格的行列跨度(维度)
因工作需要用到跨合并单元格获取数据,所以写了个NPOI扩展类. 主要方法如下: 1.判断指定行/列索引(单元格)是否为合并单元格. 2.获取指定列索引的实际含有数据的单元格. 3.返回指定行/列索引的 ...
- Linux环境下的IDE,极大提升编程效率
"一个真正的程序员是不用IDE(译者注:集成开发环境)的,他们都是用带着某某插件的文本编辑器来写代码."我们总能在某些地方听到此类观点.然 而,尽管越来越多的人同意这样的观点,但是 ...
- 玩转 SSH(七):使用 dubbo + zookeeper 实现服务模块化
一.创建 SSMVCAnnoDemo 项目 点击菜单,选择“File -> New Project” 创建新项目.选择使用 archetype 中的 maven-quickstart 模版创建. ...