window.outerHeight和window.outerWidth  表示整个浏览器窗体的大小,包括任务栏等。                     IE9及以上

window.innerHeight和window.innerWidth  表示获取window窗体的内部宽度,不包括用户界面元素,比如窗框,工具栏等    IE9及以上

具体兼容情况,参见张鑫旭大神

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  • window.innerHeight - 浏览器窗口的内部高度
  • window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

 var w = window.innerWidth ||  document.documentElement.clientWidth || document.body.clientWidth;

 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

Window Screen 有关用户 屏幕 信息

window.screen.height

window.screen.width

window.screen.availHeight

window.screen.availWidth

window.screenLeft

window.screenTop

  • screen.availWidth - 可用的屏幕宽度    属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。

  • screen.availHeight - 可用的屏幕高度   属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。

  

  1. 无padding  无滚动

  2.有padding  无滚动    可视区的宽度 = 150 + 10*2 = 170

  3.有padding 有滚动条    clientWidth = 150 + 10*2 -滚动条宽度 = 153

-------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------

  就是边框

javascript中的那些宽度和高度的更多相关文章

  1. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  2. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  3. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  4. JQuery或JavaScript获取网页的宽度、高等

    最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...

  5. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. javascript 宽度和高度

    宽度和高度 对于编写css代码时,宽度和高度就是width和height 但是在JavaScript中,还有其他的宽度和高度,比如offsetWidth,offsetHeight,clientX,cl ...

  7. Android在OnCreate中获取控件的宽度和高度

    在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高 ...

  8. JavaScript获取屏幕和页面的宽度和高度

    JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  9. Js 中一系列宽度和高度的学习

    在学习元素一系列宽度和高度之前,我们先来看一个平时开发中几乎不会遇到的问题,那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响.几乎不会遇到,是因为我们在写h ...

随机推荐

  1. Light OJ 1317 Throwing Balls into the Baskets 概率DP

    n个人 m个篮子 每一轮每一个人能够选m个篮子中一个扔球 扔中的概率都是p 求k轮后全部篮子里面球数量的期望值 依据全期望公式 进行一轮球数量的期望值为dp[1]*1+dp[2]*2+...+dp[ ...

  2. java-面向对象(二)

    这几天正在看HeadFirst的时候,突然认为面向对象的几个特点,有点理解模糊不清.所以在这再次回想一下,加深印象. 上篇博客(http://blog.csdn.net/u010539352/arti ...

  3. WPF silverlight获取子控件(获取DataTemplate里的子控件)

    public static class VisualTreeExtensions { /// <summary> /// 获取父节点控件 /// </summary> /// ...

  4. BZOJ 1264: [AHOI2006]基因匹配Match 树状数组+DP

    1264: [AHOI2006]基因匹配Match Description 基因匹配(match) 卡卡昨天晚上做梦梦见他和可可来到了另外一个星球,这个星球上生物的DNA序列由无数种碱基排列而成(地球 ...

  5. ES设置查询的相似度算法

    similarity Elasticsearch allows you to configure a scoring algorithm or similarity per field. The si ...

  6. Linux就该这么学 20181003(第四章Vim/shell/测试条件)

    参考链接https://www.linuxprobe.com/ vim文本编辑器 命令模式:控制光标移动,可对文本进行复制,黏贴,删除和查找工作 输入模式:正常的文本录入 末行模式:保存或退出文档,以 ...

  7. 适配器模式(Adapter):类适配器、对象适配器

    适配器模式(Adapter):将一个类的接口转换成客户希望的另外一个接口.A d a p t e r 模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用场景: 1.已经存在的类的接口 ...

  8. eclipse01

    http://blog.csdn.net/luman1991/article/category/6354903

  9. Python3基础笔记---线程与进程

    参考博客:Py西游攻关之多线程(threading模块) 一.并发与并行的区别 并发:交替做不同事的能力并行:同时做不同事的能力 行话解释:并发:不同代码块交替执行的性能并行:不同代码块同时执行的性能 ...

  10. AJAX和JSON实际应用

    实现功能:登录验证 一.因为我是在SpringMVC框架上写的,首先得添加依赖: <dependencies> <!-- 用来测试的依赖 --> <dependency& ...