js获取浏览器和屏幕的各种宽度高度

一：网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）

1.对于IE9+、chrome、firefox、Opera、Safari：

window.innerHeight浏览器窗口的内部高度；

window.innerWidth浏览器窗口的内部宽度；

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；

或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：

document.body.clientHeight：表示HTML文档所在窗口的当前高度；

document.body.clientWidth：表示HTML文档所在窗口的当前宽度；

结论：

document.body.clientWidth/Height：的宽高偏小，高甚至默认200；

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案：

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

二：网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;

2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；

3.浏览器兼容代码：

var w = document.documentElement.scrollWidth || document.body.scrollWidth;
var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二：网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）

1.值：   offsetWidth = scrollWidth + 左右滚动条 +左右边框；

　　　　offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

2.浏览器兼容代码：

var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
var h = document.documentElement.offsetHeight || document.body.offsetHeight ;

三：网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

  • js实现带简单弹性运动的导航条

    js实现带简单弹性运动的导航条

    晚上跟着视频敲了下 弹性菜单的代码,先记下来 效果如下: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .ul1{ width:450px; height:30px; margi

  • javascript 操作cookies详解及实例

    javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

  • js实现简易垂直滚动条

    js实现简易垂直滚动条

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直滚动条</title> <style type="text/css"> .con { width: 350px; height: 600px; border: 1px solid saddlebrown; position: relativ

  • 微信小程序 引用其他js文件实现代码

    微信小程序如何引用其他js文件 1.我们先建立一个common.js文件,在common.js编写我们的程序, function myfunc() { console.log("myfunc...."); } module.exports.myfunc = myfunc; 这样暴露接口,这里不暴露是不能引用的, 在文件域js内 var common = require("../../common.js");去链接过来,光链接过来还不行! var app; var c

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • Javascript 链式作用域详细介绍

     Javascript 链式作用域 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的.记住JS中经典的一句话是,一切皆对象. 说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量.当然也包括全局变量window(一般的函数定义function a(){},其实都是win

  • js实现楼层导航功能

    js实现楼层导航功能

    图如下所示: 1.点击跳转到相应区域: 页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离: document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength; 2.滚动滚动条时对应的导航链接被激活 每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中.区间范围为当前板块的scrollTop值(包含)~

  • js获取浏览器和屏幕的各种宽度高度

    一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小) 1.对于IE9+.chrome.firefox.Opera.Safari: window.innerHeight浏览器窗口的内部高度: window.innerWidth浏览器窗口的内部宽度: 2.对于IE8.7.6.5: document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度: document.documentElement.clientWidth:表示HTML文档所

  • JS 获取浏览器和屏幕宽高等信息代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • JS 获取浏览器和屏幕宽高等信息的实现思路及代码

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法

    如下所示: screen.width screen.height screen.availHeight //获取去除状态栏后的屏幕高度 screen.availWidth //获取去除状态栏后的屏幕高度 一.通过浏览器获得屏幕的尺寸 二.获取浏览器窗口内容的尺寸 //高度 window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight //宽度 window.innerWidth

  • JS获取浏览器地址栏的多个参数值的任意值实例代码

    下面通过一段代码给大家介绍js获取浏览器地址栏的多个参数值的任意值,具体代码如下所示: getParamValue("id"); //http://localhost:2426/TransactionNotes.aspx?id=100 //返回值是100: // 根据参数名称获取参数值 function getParamValue(name) { var paramsArray = getUrlParams(); if (paramsArray != null) { for (var

  • js 获取浏览器高度和宽度值(多浏览器)

    js 获取浏览器高度和宽度值(多浏览器)

     IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.

  • js获取input长度并根据页面宽度设置其大小及居中对齐

    1. js获取页面宽度高度及屏幕分辨率 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去

  • js获取浏览器基本信息大全

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

  • js获取浏览器的各种属性

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth    (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高:

  • JS获取浏览器版本及名称实现函数

    复制代码 代码如下: // 获取浏览器名称及版本信息 function appInfo(){ var browser = { msie: false, firefox: false, opera: false, safari: false, chrome: false, netscape: false, appname: 'unknown', version: 0 }, userAgent = window.navigator.userAgent.toLowerCase(); if ( /(ms

随机推荐