各种宽高

1.显示器的分辨率

window.screen.width-----显示器的宽度 单位是p x

window.screen.height-----显示器的高度 单位是px

window.screen.availWidth-----显示器的可用宽度 是指浏览器窗口最大后,浏览器能撑开的宽度(滚动条也是浏览器的一部分),

其中任务栏不包括在内,即使将任务栏设置为自动隐藏

window.screen.availHeight-----显示器的可用高度 是指浏览器窗口最大后,浏览器能撑开的高度(滚动条也是浏览器的一部分),

                 其中任务栏不包括在内,即使将任务栏设置为自动隐藏

2.窗口的文档显示区

window.innerWidth-----窗口的当前宽度,其中包括滚动条  可以认为是窗口的可见宽度+滚动条 滚动条的宽高一般为17px

window.innerHeight-----窗口的当前高度,其中包括滚动条 可以认为是窗口的可见高度+滚动条 滚动条的宽高一般为17px

IE 8(包括)以下不兼容

3.窗口的可视区域

IE 7(包括)以上:

document.documentElement.clientWidth-----窗口的可视区域宽度,不包括滚动条

document.documentElement.clientHeight-----窗口的可视区域高度,不包括滚动条

IE 7(不包括)以下

document.body.clientWidth-----body的内容区宽度,不包括滚动条,不包括边框,不包括margin,但是包括padding

document.body.clientHeight-----body的内容区高度 ,不包括滚动条,不包括边框,不包括margin,但是包括padding

document.body以前是IE的私有属性,在IE7出现以前,用来获取可视区域大小的,后来各种浏览器也都开始支持该属性,但是还是存在问题的,比如

document.body是body元素,document.documentElement是html元素,在窗口缩小时,document.body.clientHeight一直都是body的真正宽度1104,而document.documentElement则能得到可视窗口的宽度。

这种bug在IE 7(包括)以上浏览器以及其他浏览器都存在

4.offsetWidth和offsetHeight元素自身宽高

document.documentElement.offsetWidth-----窗口(html)的自身宽度,不包括滚动条,不包括margin,但是包括padding,包括border

document.documentElement.offsetHeight-----窗口(html)的自身高度,不包括滚动条,不包括margin,但是包括padding,包括border

document.body.offsetWidth-----body的contentWidth+padding+border

document.body.offsetHeight-----body的contentHeight+padding+border;

可以理解为该元素边框包围的范围(包括边框)

5.页面的真正宽高

有时候元素的内容比元素本身宽,比本身高,scrollWidth&&scrollHeight是得到元素的实际宽高

document.documentElement.scrollWidth-----html的contentWidth+margin+border+padding

document.documentElement.scrollHeight-----html的contentHeight+margin+border+padding

6.offsetTop

本身外边框到父元素内边框的距离,各个浏览器计算方式差异很大

元素定位时,主要看元素的边框在哪里,边框的位置除了和定位的top,left等有关,还和margin有关

offsetTop是往上寻找祖先元素,第一个不是static定位的祖先元素就是该元素的offsetParent,offsetTop是本身元素的border到祖先元素的border距离。如果一直没有非static定位,则最后offsetParent是body元素

7.clientTop和clientLeft

clientTop-----border-top的值

clientLeft-----border-left的值

兼容性不行

8.scollTop和scrollLeft

scrollTop-----页面往上滚动的距离

scrollLeft-----页面往左滚动的距离

不应该使用document.documentElement.scrollTop,应该使用document.body.scrollTop代替

9.window.pageYOffset和window.pageXOffset

页面相对于窗口左上角的X和Y位置

时间: 2024-10-09 23:53:16

各种宽高的相关文章

解决GridView动态设置宽高导致第一个item点击不响应或显示不正常问题

最近做项目的时候遇到了2次这个问题,现在分享一下经验 一.问题 问题代码: </pre><p><pre name="code" class="java">@Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub final ViewHolder holder

css未知宽高的盒子div居中的多种方法

不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: XiaoWen Create a file: 2017-01-13 13:46:47 Last modified: 2017-01-13 14:05:04 Start to work: Finish the work: Other information: --> <!DOCTYPE html>

iOS_根据文字字数动态确定Label宽高

iOS7中用以下方法 - (CGSize)sizeWithAttributes:(NSDictionary *)attrs; 替代过时的iOS6中的- (CGSize)sizeWithFont:(UIFont *)font 方法 // iOS7_API_根据文字 字数动态确定Label宽高 // 设置Label的字体 HelveticaNeue Courier UIFont *fnt = [UIFont fontWithName:@"HelveticaNeue" size:24.0f]

未知宽高的元素水平垂直居中方法总结

1.父元素设置display:table;子元素设置display:table-cell; 缺点:IE7不支持,而且子元素会填满父元素,不建议使用 2.使用css3 transform:translate(-50%; -50%) 缺点:兼容性不好,IE9+ 3.使用flex布局 缺点:兼容性不好,IE9+ 4.利用伪类元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

元素宽高的获取

elem.clientWidth/Height   获取某个元素可视区的宽高(不包括边框): elem.offsetWidth/Height   获取某个元素的宽高(计算边框): 当元素有padding值时,上面两个方法获取的值都包括padding. document.documentElementClientWidth/Height  获取文档可视区宽高,窗口变化时该值随之变化.

窗口尺寸,文档高,元素宽高的获取方式

一.元素宽高: window.onload = function() {    var oDiv = document.getElementById('div1');     /*        width height        style.width : 样式宽        clientWidth : 可视区宽        offsetWidth    : 占位宽    */        alert( oDiv.style.width );    //100    alert( o

H5 canvas的 width、height 与style中宽高的区别

Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width="300" height="300">浏览器不支持Canvas,请升级或改用其它浏览器!</canvas> <script type="text/javascript"> var canvas = document.getE

JS-自制提速小工具:开发页面时需要按比例计算宽高值的快速计算器

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="author" content"郭菊锋,[email protected]"> <title>开发页面时需要按比例计算宽高值得快速计算器</title> </head> <body> <p id="

BOM,文档宽高及窗口事件

(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式如果url为空,默认打开一个空白页面如果打开方式为空,默认打开新窗口方式打开返回值:发挥新打开的窗口的window对象 2. close(,)关闭窗口,前边对象是谁关闭谁兼容:(1)火狐ff:默认无法关闭(2)Chorme:默认直接关闭(3)ie:询问用户可以关闭在本窗口中通过js方法打开的新窗口

Android中ListView嵌套GridView的简单消息流UI(解决宽高问题)

最近搞一个项目,需要用到类似于新浪微博的消息流,即每一项有文字.有九宫格图片,因此这就涉及到ListView或者ScrollView嵌套GridView的问题.其中GridView的高度问题在网上都很容易找到答案,即覆写onMeasure方法,然后设置高度的MeasureSpec.但是宽度问题确实没有什么资料,这里所说的宽度问题是比如GridView的列数为3,那么即使只有一张图片,gridview的宽度也是match_parent的,导致用户点击在图片范围外但是在gridview范围内时Lis