获取浏览器屏幕高度(js,jq) - 进击的小牛牛 - 博客园

javascript

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高)

 

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽

 

jQuery:

alert($(window).height());                           //浏览器当前窗口可视区域高度

alert($(document).height());                        //浏览器当前窗口文档的高度

alert($(document.body).height());                //浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width());                            //浏览器当前窗口可视区域宽度

alert($(document).width());                        //浏览器当前窗口文档对象宽度

alert($(document.body).width());                //浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

 

以下为参考图:

 

 

注:本文从 MIN飞翔 转出 http://www.cnblogs.com/EricaMIN1987_IT/p/3593431.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248906.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第一个爬虫和测试

Python测试函数的方法之一是用&#xff1a;try……except def gameover(a,b):if a>10 and b>10 and abs(a-b)2:return Trueif (a>11 and b<11) or (a<11 and b>11):return Truereturn False try:agameover(10,11)print(a) except:print("Error") g…

JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园

前言&#xff1a;很多时候我们在项目中需要用到树&#xff0c;有些树仅仅是展示层级关系&#xff0c;有些树是为了展示和编辑层级关系&#xff0c;还有些树是为了选中项然后其他地方调用选中项。不管怎么样&#xff0c;树控件都是很多项目里面不可或缺的组件之一。今天&#xf…

蓝桥杯 历届试题 九宫重排 (bfs+康托展开去重优化)

Description 如下面第一个图的九宫格中&#xff0c;放着 1~8 的数字卡片&#xff0c;还有一个格子空着。与空格子相邻的格子中的卡片可以移动到空格中。经过若干次移动&#xff0c;可以形成第二个图所示的局面。我们把第一个图的局面记为&#xff1a;12345678.把第二个图的局面…

DIV或者DIV里面的图片水平与垂直居中的方法 - 站住,别跑 - 博客园

DIV或者DIV里面的图片水平与垂直居中的方法 <div class“box”><img /> </div> 水平居中的常用方式&#xff1a; text-align:center ——这可以实现子元素字体&#xff0c;图片的水平居中。 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常…

设置图片元素上下垂直居中的7种css样式_赵一鸣博客

设置图片元素上下垂直居中的7种css样式 阅读(9548) 2018-07-15 14:13:34 图片、文字左右居中很简单&#xff0c;只需要以下代码&#xff1a; 1 text-align:center; 文字上下居中也很简单&#xff0c;假设外部div元素的高度是100px&#xff0c;那么&#xff1a; 1 line-heig…

day36 Pyhton 网络编程03

一.内容回顾 socket通常也称作"套接字"&#xff0c;用于描述IP地址和端口&#xff0c;是一个通信链的句柄&#xff0c;应用程序通常通过"套接字"向网络发出请求或者应答网络请求。 socket起源于Unix&#xff0c;而Unix/Linux基本哲学之一就是“一切皆文件”…

推荐21个顶级的Vue UI库! – TalkingData‘s Blog

推荐21个顶级的Vue UI库&#xff01; 最近&#xff0c;随着“星球大战”&#xff08;指 GitHub 的 Star 数量大比拼&#xff09;的爆发&#xff0c;Vue.js 在 GitHub 上的 Star 数超过了 React。虽然 NPM 的下载量仍然落后于 React&#xff0c;但 Vue.js 的受欢迎程度似乎在持续…

2019河北省大学生程序设计竞赛(重现赛)B 题 -Icebound and Sequence ( 等比数列求和的快速幂取模)...

题目链接&#xff1a;https://ac.nowcoder.com/acm/contest/903/B 题意&#xff1a; 给你 q,n,p,求 q1q2...qn 的和 模 p。 思路&#xff1a;一开始不会做&#xff0c;后面查了下发现有个等比数列求和的快速幂公式&#xff0c;附上链接https://www.cnblogs.com/yuiffy/p/380917…

nodejs服务后台持续运行

forever.jpeg 我用本地mac连接阿里云服务器&#xff0c;启动nodejs服务&#xff0c;客户端掉线&#xff0c;服务也会终止。如何在客户端掉线的情况下&#xff0c;node服务正常运行&#xff1f; forever介绍 forever是一个nodejs守护进程&#xff0c;完全由命令行操控。forev…

Node.js+Koa开发微信公众号个人笔记(一)准备工作 - ZhangCui - 博客园

本人也是在学习过程中&#xff0c;所以文章只作为学习笔记&#xff0c;如果能帮到你&#xff0c;那就更好啦~当然也难免会有错误&#xff0c;请不吝指出~ 一、准备工作 1、本人学习教程&#xff1a;慕课网Scott老师的《Node.js七天搞定微信公众号》 &#xff0c;但是有点小贵…

【vue-router①】router-link跳转页面传递参数 - 进击的前端之路(偶尔爬坑java小路) - SegmentFault 思否

在vue项目中&#xff0c;往往会遇到这样的情况&#xff0c;就是要实现在一个循环列表中&#xff0c;点击其中一条跳转到下个页面&#xff0c;然后将这一条的相关数据带到下个页面中显示&#xff0c;这是个循环列表&#xff0c;无论点哪一条都是跳到相同的页面&#xff0c;只是填…

Jmeter-【JSON Extractor】-响应结果中三级key取值

一、请求返回样式 二、取第三个option 三、查看结果 转载于:https://www.cnblogs.com/Nancy-Lee/p/10938758.html

手摸手,带你用vue撸后台 系列一(基础篇) - 掘金

完整项目地址&#xff1a;vue-element-admin 系列文章&#xff1a; 手摸手&#xff0c;带你用 vue 撸后台 系列一&#xff08;基础篇&#xff09;手摸手&#xff0c;带你用 vue 撸后台 系列二(登录权限篇)手摸手&#xff0c;带你用 vue 撸后台 系列三 (实战篇)手摸手&#xf…

webpack+vue+mui学习心得

引入mui 1.不需要npm安装; 直接从官方下载丢进来 2.那就是全局引用了; 没错,就是index.html里直接引入,当然也可以main.js引入,随意啦! so easy 3.找到webpack.base.conf.js,在module与plugins之间插入以下代码: 4.这样就可以在项目里面直接用了.然就是mui与vue-router及点…

【ARTS】01_04_左耳听风-20181203~1209

ARTS&#xff1a; Algrothm: leetcode算法题目Review: 阅读并且点评一篇英文技术文章Tip/Techni: 学习一个技术技巧Share: 分享一篇有观点和思考的技术文章Algorithm Single Number https://leetcode.com/problems/single-number/ 1&#xff09;problem Given a non-empty arra…

vue项目(webpack+mintui),使用hbuilder打包app - 小小人儿大大梦想 - 博客园

一、配置config/index.js 本人没有配置index.js文件&#xff0c;就开始进行了打包&#xff0c;结果最终效果是页面空白&#xff0c;解决了空白&#xff0c;接着底部图标&#xff08;我是用的阿里巴巴图片&#xff09;资源找不到。所以配置这步比较重要。 &#xff08;1&#…

caffe介绍

转载于:https://www.cnblogs.com/Artimis-fightting/p/10945099.html

微服务之consul(一) - 诗码者 - 博客园

一、概述 consul是google开源的一个使用go语言开发的服务发现、配置管理中心服务。内置了服务注册与发现框 架、分布一致性协议实现、健康检查、Key/Value存储、多数据中心方案&#xff0c;不再需要依赖其他工具&#xff08;比如ZooKeeper等&#xff09;。服务部署简单&#x…

图解基于 Node.js 实现前后端分离 - CSDN博客

因为会上出了个意外&#xff0c;ppt图片全部丢失&#xff0c;只好对着白板跟大家交流了半个多小时。由于我做演讲不喜欢写太多的文字&#xff0c;没有图片的情况下讲漏了一些内容。这篇文章是我在会上分享内容对照ppt进行地整理。 基本介绍 首先从一个重要的概念“模板”说起…

CF176E Archaeology(set用法提示)

题目大意&#xff1a; 给一棵树&#xff0c;每次激活或熄灭一个点&#xff0c;每次问这些点都联通起来所需的最小总边权 分析&#xff1a; 若根据dfs序给所有点排序&#xff0c;为$v1,v2,v3....vk$&#xff0c;那么答案就是$(dis(v1,v2)dis(v2,v3)...dis(vk-1,vk)dis(vk,v1))/2…