一.Window视图属性(window对象)

这些属性可以获取住整个浏览器窗体大小。微软则将这些API称为“Screenview 接口”

innerWidth 属性和 innerHeight 属性
pageXOffset 属性和 pageYOffset 属性
screenX 属性和 screenY 属性
outerWidth 属性和 outerHeight 属性

1.innerWidth 属性和 innerHeight 属性

描述:innerWidth表示获取window窗体的内部宽度,不包括用户界面元素,浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)
兼容:现代浏览器获取的值相同,IE6/7/8是undefined无法获取值,以1920*1080分辩率测试(有收藏栏),chrome为1920*965,IE9以上1920*965,firefox:1920*955
方法:window.innerWidth;window.innerHeight;

//使用innerWidth和innerHeight来获取可视区的宽高,IE则使用clientWidth与clientHeight
function getViewPort(){
var pageWidth = 0;
var pageHeight = 0;
if(!window.innerWidth){
pageWidth = document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
pageHeight = document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
}else{
pageWidth = window.innerWidth;
pageHeight = window.innerHeight;
}
return{width:pageWidth,height:pageHeight};
}

2.outerWidth 属性和 outerHeight 属性

描述:outerWidth/outerHeight表示整个浏览器窗体的大小,包括所有界面元素(如工具栏/滚动条)
兼容:现代浏览器获取的值略有些不同,以1920*1080分辩率测试(显示器任务栏在底部),chrome为1920*1050,IE9以上1936*1066,IE6/7/8是undefined无法获取值,firefox*1936*1066
方法:window.outerWidth;window.outerHeight;

3. pageXOffset 属性和pageYOffset 属性

描述:返回当前页面相对于窗口显示区位置,表示整个页面滚动的像素值(水平方向的和垂直方向的)
兼容:所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性 。
方法:window.pageXOffset;window.pageYOffset;

4.screenX 属性和 screenY 属性

描述:浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置
兼容:所有主要浏览器都支持screenX和screenY属性。(chrome:从0,0开始,firefox是-8,-8开始)注意: IE 8 及 更早 IE 版本不支持该属性,IE低版本浏览器使用"window.screenLeft" 和 "window.screenTop"可获得相同的值
方法:window.screenX;window.screenY;

二、Screen视图属性(screen对象)

指能获取显示器信息的些属性。这类API又被称为“Screen 接口”。
availWidth 属性和 availHeight属性
colorDepth属性
pixelDepth属性
width 属性和 height 属性

1.availWidth 属性和 availHeight属性

描述:返回访问者显示器屏幕可用宽高,不包括任务栏
兼容:兼容性相当高:以1920*1080分辩率测试(显示器任务栏在底部,所有要减去任务栏40px),chrome,IE,firefox的(screen.availWidth和screen.availHieght)都是返回1920*1050
方法:screen.availWidth;screen.availHeight;

2.colorDepth属性()

表示显示器的颜色深度
兼容:主浏览器都支持返回24,IE6/7/8返回32
方法:screen.colorDepth;

3.pixelDepth属性 与colorDepth属性一样,但IE6/7/8不支持

4.width 属性和 height 属性

描述:表示显示器屏幕的宽高
兼容:所有主要浏览器都支持,以1920*1080分辩率测试,chrome,IE,firefox全部返回1920*1080
方法:screen.width;screen.height;

三、文档视图(DocumentView)和元素视图(ElementView)方法

四个方法
elementFromPoint()
getBoundingClientRect()
getClientRects()
scrollIntoView()

1.elementFromPoint()

描述:返回给定坐标处所在的元素。
兼容:不过位置坐标不太一样,浏览器还是有差异的
方法:document.elementFromPoint(100,100);

2.getBoundingClientRect()

描述:得到矩形元素的界线,返回的是一个对象,包含 top, left, right, 和 bottom四个属性值,大小都是相对于文档视图左上角计算而来
兼容:所有主要浏览器都支持
方法:element.getBoundingClientRect();

一般getBoundingClientRect方法用的多一点。我们可以很容易获取某个元素的偏移值。甚至高宽都能很轻松的计算出来。所以,你想用js获取元素的高宽尺寸,就可以试试getBoundingClientRect方法了。

3.getClientRects()

返回元素的数个矩形区域,返回的结果是个对象列表,具有数组特性。这里的矩形选区只针对inline box,因此,只针对a, span, em这类标签元素
兼容:IE6/7有bug,其他支持

4.scrollIntoView()

描述:让元素滚动到可视区域(不属于草案方法),类似锚点跳转功能页面定位
兼容:所有浏览器都兼容
方法:element.scrollIntoView();

四、元素视图属性(Element)

关于元素大小位置等信息的一些属性。有:
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight

1. clientLeft 属性和 clientTop 属性

描述:表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。其兼容性不错,
兼容:所有浏览器都支持,但当元素是按钮button标签时:IE浏览器下,弹出的大小为3,在Chrome浏览器及FireFox浏览器下则是2,这是IE浏览器的按钮button标签在我的系统下的有3像素大小的边框值,而Chrome,FireFox的边框大小只有2像素。

方法:object.clientLeft;object.clientTop

2. clientWidth 属性和 clientHeight 属性

描述:表示内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条
兼容:所有浏览器都兼容,以1920*1080分辩率测试(最外层设度高为width:100%;height:100%;),现代浏览器有滚动条的情况下是宽度1903,IE6/7/8是1899,无滚动条宽度是1920

方法:object.clientWidth;object.clientHeight;

3. offsetLeft和offsetTop

描述:表示相对于最近的祖先定位元素(CSS position 属性被设置为 relative、absolute 或 fixed 的元素)的左右偏移值
兼容:所有浏览器都兼容

4. offsetParent
描述:第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)
兼容:所有浏览器都兼容

5. offsetWidth和offsetHeight
描述:整个元素的尺寸(包括边框)
兼容:所有浏览器都兼容

6. scrollLeft和scrollTop
描述:表示元素滚动的像素大小。可读可写。
兼容:所有浏览器都兼容

7.scrollWidth和scrollHeight
描述:表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight。
兼容:不理想

五、鼠标位置(event对象)

与鼠标事件(例如普通的单击)相关的些属性。有:
clientX 属性和 clientY属性
offsetX 属性和 offsetY属性
pageX 属性和 pageY属性
screenX 属性和 screenY属性
x 属性和 y属性

1.clientX 属性和 clientY属性
描述:相对于window,为鼠标相对于window的偏移,不包括滚动条
兼容:所有浏览器都兼容

2.offsetX 属性和 offsetY属性
描述:表示鼠标相对于当前被点击元素padding box的左上偏移值,
兼容:各个浏览器的兼容性五花八门

3. pageX, pageY
描述:为鼠标相对于document的坐标。包括滚动条的偏移
兼容:IE6~IE8浏览器是不支持的

4. screenX, screenY
描述:鼠标相对于显示器屏幕的偏移坐标。
兼容:所有浏览器都兼容

参考网址:http://www.zhangxinxu.com/wordpress/?p=1907

CSSOM视图模式(CSSOM View Module)的更多相关文章

  1. [转] CSSOM视图模式(CSSOM View Module)相关整理

    以下就是一些API属性的相关内容,包括兼容性,使用,测试等. 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Screenview 接口”.包括:inner ...

  2. CSSOM视图模式(CSSOM View Module)相关整理:scrollWidth,scrollLeft,offsetLeft,clientX ,offsetX 定义和区别

    转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-mo ...

  3. CSSOM视图模式(CSSOM View Module)相关整理(转载)

    原文地址 http://www.zhangxinxu.com/wordpress/?p=1907 一.Window视图属性 这些属性可以hold住整个浏览器窗体大小.微软则将这些API称为“Scree ...

  4. CSSOM视图模式

    相关技术文章: CSSOM视图模式(CSSOM View Module)相关整理 W3C CSSOM View Module

  5. CSSOM View Module

    就在8月份,也就是上次gf大姨妈来的时候,W3C出炉了CSSOM视图模块(CSS Object Model View)草案.CSSOM视图模块(CSSOM View Module)定义了一些 API, ...

  6. MWeb 1.6 发布!Dark Mode、全文搜寻、发布到Wordpress、Evernote 等支持更新、编辑/预览视图模式等

    Dark Mode 使用 View - Dark Mode 或快捷键 CMD + Option + L 开启或关闭 Dark Mode.可以在设置中设置 Dark Mode 状态下编辑器所使用的样式, ...

  7. MSSQL索引视图(indexed view)之简述及使用

    乍一听到这个名字,可能感到有点陌生,这个对象是干嘛的呢?原理是什么?不用着急,我们看看下面的内容,慢慢就明白了.顾名思义,索引视图就是建有索引的视图,这是MSSQL提供的一项技术,用于提升某些SQL语 ...

  8. SAP CRM 树视图(TREE VIEW)

    树视图可以用于表示数据的层次. 例如:SAP CRM中的组织结构数据可以表示为树视图. 在SAP CRM Web UI的术语当中,没有像表视图(table view)或者表单视图(form view) ...

  9. virtaulbox视图模式常用切换

    virtaulbox发现菜单不见,如何切换视图模式呢? 很简单,通过快捷键主机(host)键 Host+F                                          换到全屏模 ...

随机推荐

  1. [爬虫]Python爬虫进阶

    请跳转到以下页面查看: 爬虫进阶

  2. JavaScript入门学习书籍的阶段选择

    对于许多想学习 JavaScript 的朋友来说,无疑如何选择入门的书籍是他们最头疼的问题,或许也是他们一直畏惧,甚至放弃学习 JavaScript 的理由.在 JavaScript 方面,自己不是什 ...

  3. H264裸流分析中,能获取哪些信息?

    从H264的裸流中,PPS,SPS中,一定可以获取到的,有图像的宽,高信息. 这部分信息的提取,用Stream eye 分析: 这里需要特别提一下这两个参数:  pic_width_in_mbs_mi ...

  4. (转)分析kernel的initcall函数

      分析kernel的initcall函数   来源: ChinaUnix博客 日期: 2008.07.19 21:24 (共有条评论) 我要评论   分析kernel的initcall函数Autho ...

  5. 查看CentOS的网络带宽出口

    检查维护系统的时候,经常会要查看服务器的网络端口是多大的,所以需要用到Linux的一个命令. 如何查看CentOS的网络带宽出口多大?可以用下面的命令来查看. # ethtool eth0 前面是命令 ...

  6. 用 python 抓取知乎指定回答下的视频

    前言 现在知乎允许上传视频,奈何不能下载视频,好气哦,无奈之下研究一下了,然后撸了代码,方便下载视频保存. 接下来以 猫为什么一点也不怕蛇? 回答为例,分享一下整个下载过程. 调试一下 打开 F12, ...

  7. write solid code Chapter 2 练习题4 的解答与扩展

    原题: 4.When programmers add new elements to an enumeration, they sometimes forget to add new cases to ...

  8. Linux jstack分析cpu占用100%

    背景: 运行测试程序后,top命令发现某个进程(pid)占用cpu达到100%.   查看哪个线程占用最多资源: ps mp pid -o THREAD,tid,命令查看这个进程下面的所有线程占用情况 ...

  9. ChemDraw中如何输入化学式分隔点

    ChemDraw最实用的化学结构绘图软件,在绘制化学结构时,离不开给化学结构标记原子名称,有时还需要插入分隔点,本教程以下图给出的化学结构为例,讲解ChemDraw中如何输入化学式分隔点.  化学结构 ...

  10. c# JsonHelper类

    using System; using System.Collections; using System.Collections.Generic; using System.Linq; using S ...