html获取页面高度,js获取各种高度

监听浏览器窗口大小改

先来一个浏览器窗口大小改变的事件，用来查看浏览器窗口的大小被改变可以触发一些函数

window.onresize 浏览器窗口大小改变事件

window.onresize = function () {

console.log('浏览器窗口的大小被改变了');

something.....

}

复制代码

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。

1. 网页全文的高度和宽度：常用

获取的是body中的内容的高度，不会受到body本身的高度影响

如果body给定了固定高度/宽度，获取的依然是body里面内容的高度

document.body.scrollHeight //文档高度 body中内容的高度

$(document).height()

document.body.scrollWidth //文档宽度 **body中内容的宽度**

$(document).width()

复制代码

2. 获取屏幕的高度和宽度(屏幕分辨率)：

获取整个屏幕的高\宽度

这是一个固定值

window.screen.height //屏幕高度

window.screen.width //屏幕宽度

复制代码

3. 获取屏幕可工作区域的高度和宽度(去掉状态栏)：

只去除了上面的状态栏，打开控制台不受影响

这是一个固定值，不受浏览器窗口大小而改变

window.screen.availHeight = window.screen.height - 浏览器上面状态栏的高度

复制代码

window.screen.availHeight //可视区域去除状态栏高度

window.screen.availWidth //可视区域去除状态栏宽度(和上面的值一样)

复制代码

4. 滚动条卷上去的高度和向右卷的宽度：

document.body.scrollTop

document.body.scrollLeft

复制代码

5. 网页可见区域的高度和宽度

以下所有的高度都会受到 body高度的影响，比如body可是区域变小，或者body设置了固定高度

是去除浏览器上面个状态栏和控制台高度剩下的可以显示网页内容的高度

(不加边线)：

document.body.clientHeight

document.body.clientWidth

复制代码

网页可见区域的高度和宽度(加边线)：

document.body.offsetHeight

document.body.offsetWidth

window.innerHeight

window.innerWidth //没有去除滚动条的宽度

document.documentElement.clientHeight

document.documentElement.clientWidth //去除滚动条的宽度

复制代码

html获取页面高度,js获取各种高度相关推荐

原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
php获取div高度,JS获取一个未知DIV高度的方法
本文实例讲述了JS获取一个未知DIV高度的方法.分享给大家供大家参考,具体如下: 通过元素的clientHeight属性能够得到元素的高度,如:var height = element.clientH ...
HTML页面从JS获取数据
最近在写网页,遇到了好多问题,慢慢解决并且记录. HTML从JS获取数据,方法有很多例如 document.getElementById("bar").innerHTML = & ...
js获取当前时间写入HTML,html获取当前时间 js获取当前日期的前后4天
可以用javascript,先创建Date对象的实例(也叫做对象的引用).创建实例的语法有如下三种. var newDateObj = new Date() var newDateObj = new ...
html获取url参数值,js获取url中参数值的两种方法
本节主要内容: js获取url中参数值. 方法1:正则分析法复制代码代码示例: function getQueryString(name) { var reg = new RegExp(" ...
页面通过js获取并加载远程html文件，移除html文件中不需要的内容，修改html文件中img图片的路径
当我们需要在页面加载远程的html文件时,首先需要获取这个文件: this.$axios(htmlUrl) 移除html文件里一些无用的元素,然后加载html: this.$axios(htmlUrl ...
html获取get信息,在HTML页面用JS获取Get参数方法(示例代码)
这里是一个获取URL带QUESTRING参数的JAVASCRIPT客户端解决方案,相当于asp的request.querystring,PHP的$_GET 函数: function GetReques ...
html获取元素坐标,js 获取元素相对于页面的坐标(示例)
function pageX(elem){//获取元素相对于这个页面的x坐标. return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetP ...
html 自动获取屏幕分辨率,JS获取当前网页大小以及屏幕分辨率等
获取当前对象大小以及屏幕分辨率等 var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth+" ...
通过文件url地址获取base64；通过图片url地址获取base64；js获取文件的base64
本篇是通过url地址获取文件的base64 如果想要通过File文件获取base64查看这篇以下代码可直接复制使用!注意第9行的图片地址更改下 <template><div cla ...

html获取页面高度,js获取各种高度

html获取页面高度,js获取各种高度相关推荐

最新文章

热门文章