javascript中的那些宽度和高度
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 - 可用的屏幕高度 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
无padding 无滚动
2.有padding 无滚动 可视区的宽度 = 150 + 10*2 = 170
3.有padding 有滚动条 clientWidth = 150 + 10*2 -滚动条宽度 = 153
-------------------------------------------------------------------------------我是分割线---------------------------------------------------------------------------------------------------
就是边框
javascript中的那些宽度和高度的更多相关文章
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- JQuery或JavaScript获取网页的宽度、高等
最近多次使用JQery或JavaScript获取网页的宽度或者高度,在网上搜索N久之后发现很多都是粘贴上去并没有详细的介绍,这里我将会对经常使用的一些获取页面宽高的属性,方法做详细的介绍,以便能够更加 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript 宽度和高度
宽度和高度 对于编写css代码时,宽度和高度就是width和height 但是在JavaScript中,还有其他的宽度和高度,比如offsetWidth,offsetHeight,clientX,cl ...
- Android在OnCreate中获取控件的宽度和高度
在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高 ...
- JavaScript获取屏幕和页面的宽度和高度
JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- Js 中一系列宽度和高度的学习
在学习元素一系列宽度和高度之前,我们先来看一个平时开发中几乎不会遇到的问题,那就是html文档声明<!DOCTYPE html> 确实会对元素的宽高产生影响.几乎不会遇到,是因为我们在写h ...
随机推荐
- jquery outerHeight方法 outerWidth方法 获取元素实际宽度高度
曾经写代码中,每当须要获取元素的实际"宽度"(这里的宽度是指元素宽度加上其边距)时,都须要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方 ...
- javascript系列-class6.String类型
观察淘宝网商品数据 有一个东西叫服务器>>>>js的作用重要作用之一>>>>交互>>>>人机交互(事件)>>&g ...
- 90.bower解决js的依赖管理
转自:https://blog.csdn.net/u011537073/article/details/52951122 前言一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如 ...
- 转:IE 无法使用 js trim() 的解决方法
http://hi.baidu.com/yuiezt/item/756d0f4ec4d2640ec11613f9 var aa = $("#id").val().trim() ...
- 【原创】Unable to read TLD "META-INF/c.tld" from JAR file 解决方法
type Exception report message description The server encountered an internal error () that prevented ...
- c#学习0217
1 继承 继承 1 子类是否继承了父类的构造函数 答案:子类并没有继承父类的构造函数 但是子类或默认调用父类的无参数的构造函数 在子类中创建父类对象 这样子类才可以使用父类的成员 如果在父类中声明了有 ...
- Optional Chaining as an Alternative to Forced Unwrapping
?与!的区别 You specify optional chaining by placing a question mark (?) after the optional value on whic ...
- POJ-1276 Cash Machine 多重背包 二进制优化
题目链接:https://cn.vjudge.net/problem/POJ-1276 题意 懒得写了自己去看好了,困了赶紧写完这个回宿舍睡觉,明早还要考试. 思路 多重背包的二进制优化. 思路是将n ...
- Python学习————字典的增删改查
增加:dic1['KEY'] = value -->若之前有KEY,则会覆盖.若没有KEY,则新增至尾处dic.setdefault('KEY',value/None) --->若之前有K ...
- bytes、str与unicode
1.Python3字符序列的类型 bytes -> 原始的8位值(既字节) str -> Unicode字符 2.Python2字符序列的类型 str -> 原始的8位值(既字节) ...