CSS Object Model View整理

最新推荐文章于 2024-04-01 07:52:49 发布

shadow_yn

最新推荐文章于 2024-04-01 07:52:49 发布

阅读量746

点赞数

分类专栏： jQuery-js 文章标签： css 对象 js window screen

jQuery-js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、window view properties(窗口属性)
innerWidth 和 innerHeight
outerWidth 和 outerHeight
pageXOffset 和 pageYOffset
screenX 和 screenY

1、innerWidth和innerHeight window内部的宽度和高度，不包括菜单栏、工具栏以及滚动条等的宽度和高度是只可读取属性没有默认值在不支持该属性的情况下输出undefined

window.innerWidth;
window.innerHeight;

浏览器兼容性如下：
这里写图片描述

2、outerWidth 和 outerHeight window整体的宽度和高度，包括菜单栏、工具栏以及滚动条等的宽度和高度是只可读取属性没有默认值在不支持该属性的情况下输出undefined

window.outerWidth;
window.outerHeight;

浏览器兼容性如下：
这里写图片描述

3、pageXOffset 和 pageYOffset 当前页面相对于窗口显示区左上角的 X 位置、Y位置是只可读取属性没有默认值在不支持该属性的情况下输出undefined

window.pageXOffset;
window.pageYOffset;

浏览器兼容性如下：
这里写图片描述

4、screenX 和 screenY 当前窗口相对于屏幕左上角的 X 位置、Y位置在事件中, 当作为window属性的时候，是只读的，在不支持该属性的情况下输出undefined，在旧版本opera浏览器下无论窗口是全屏显示还是窗口缩小，显示出的结果都是0

window.screenX;
window.screenY;

浏览器兼容性如下：
这里写图片描述

partial interface Window {
  ....
  // viewport
  readonly attribute double innerWidth;
  readonly attribute double innerHeight;

  // viewport scrolling
  readonly attribute double scrollX;
  readonly attribute double pageXOffset;
  readonly attribute double scrollY;
  readonly attribute double pageYOffset;
  void scroll(double x, double y, optional ScrollOptions options);
  void scrollTo(double x, double y, optional ScrollOptions options);
  void scrollBy(double x, double y, optional ScrollOptions options);

  // client
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double outerWidth;
  readonly attribute double outerHeight;
  readonly attribute double devicePixelRatio;
};

二、screen view properties(显示器属性)
width 和 height
availWidth 和 availHeight
colorDepth
pixelDepth
1、width 和 height 显示器屏幕的宽度和高度只可读取属性没有默认值

screen.width;
screen.height;

浏览器兼容性如下：
这里写图片描述、

2、availWidth 和 availHeight 显示器屏幕除去windows任务栏后的宽度和高度只可读取属性没有默认值

screen.availWidth ;
screen.availHeight  ;

3、colorDepth 显示器调色板的比特深度（颜色深度）只可读取属性 w3c上规定返回值为24 (The colorDepth attribute must return 24) 不过ie8以下版本虽然支持该属性不过返回值是32

screen.availWidth ;
screen.availHeight  ;

浏览器支持性:
这里写图片描述

4、pixelDepth 显示器调色板的比特深度（颜色深度）只可读取属性 w3c上规定返回值为24 (The pixelDepth attribute must return 24) 没有默认值在不支持该属性的情况下输出undefined

screen.availWidth ;
screen.availHeight  ;

浏览器支持性:
这里写图片描述

interface Screen {
  readonly attribute double availWidth;
  readonly attribute double availHeight;
  readonly attribute double width;
  readonly attribute double height;
  readonly attribute unsigned long colorDepth;
  readonly attribute unsigned long pixelDepth;
};

三、document view methods(文档视图方法)
elementFromPoint()

1、elementFromPoint() 返回给定坐标所在的元素

document.elementFromPoint(300, 200);

这里写图片描述

虽然大部分浏览器支持，不过IE9+以及其他浏览器返回的是一段html代码，而ie8以及以下返回的是[object Object]

partial interface Document {
  Element? elementFromPoint(double x, double y);
  sequence<Element> elementsFromPoint(double x, double y);
  CaretPosition? caretPositionFromPoint(double x, double y);
};

四、element view properties(元素视图属性)
clientWidth 和 clientHeight
clientLeft 和 clientTop
offsetWidth 和 offsetHeigh
offsetLeft 和 offsetTop
offsetParent
scrollWidth 和 scrollHeigh
scrollLeft 和 scrollTop
1、clientWidth 和 clientHeight 元素可见的宽度和高度（不包含边框和滚动条，但包含padding）

document.getElementById('content').clientWidth;
document.getElementById('content').clientHeight;

浏览器支持性：
这里写图片描述

2、clientLeft 和 clientTop 元素内容（不包含边框和滚动条，但包含padding）相对于元素左上角的宽度和高度

document.getElementById('content').clientLeft;
document.getElementById('content').clientTop;

浏览器支持性：
这里写图片描述

3、offsetWidth 和 offsetHeight 元素的宽度和高度（包含边框和padding）

document.getElementById('content').offsetWidth;
document.getElementById('content').offsetHeight;

浏览器支持性：
这里写图片描述

4、offsetLeft 和 offsetTop 相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值

document.getElementById('content').offsetLeft;
document.getElementById('content').offsetTop;

浏览器支持性：
这里写图片描述

5、offsetParent 第一个祖先定位元素（即用来计算offsetLeft和offsetTop的元素）

document.getElementById('document-main').offsetParent

浏览器支持性：
这里写图片描述

6、scrollWidth 和 scrollHeight 元素的滚动条宽度和高度（包括隐藏的部分），如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight

document.getElementById('content').scrollWidth;
document.getElementById('content').scrollHeight;

浏览器支持性：
这里写图片描述

7、scrollLeft 和 scrollTop 元素滚动的坐标值可读写

document.getElementById('content').scrollLeft;
document.getElementById('content').scrollTop;

浏览器支持性：
这里写图片描述

partial interface Element {
  ....
  attribute (double or ScrollOptionsVertical) scrollTop;
  attribute (double or ScrollOptionsHorizontal) scrollLeft;
  readonly attribute double scrollWidth;
  readonly attribute double scrollHeight;
  readonly attribute double clientTop;
  readonly attribute double clientLeft;
  readonly attribute double clientWidth;
  readonly attribute double clientHeight;
};

partial interface HTMLElement {
  readonly attribute Element? offsetParent;
  readonly attribute double offsetTop;
  readonly attribute double offsetLeft;
  readonly attribute double offsetWidth;
  readonly attribute double offsetHeight;
};

五、element view methods(元素视图方法)
getClientRects()
getBoundingClientRect()
scrollIntoView()

1、getClientRects() 元素占据页面的所有矩形区域返回值为数组 inline box时有多少行即数组长度其他的则是长度为1 数组中则是TextRectangle 对象：width、height、left、top、right、bottom

document.getElementById('head').getClientRects()

浏览器支持性：
这里写图片描述
IE6/7下的bug
getClientRects()方法是跟着line box模型走的，其返回的每个矩形区域其实就是一个line boxes，也就是一行文字内容。但是在IE6/7下把针对inline水平标签的方法应用到block水平的标签上了，如果block标签下则是返回文字的行数，而inline标签则返回文字字数

2、getBoundingClientRect() 元素相对浏览器视窗的左，上，右和下位置，返回的是一个对象：width、height、left、top、right、bottom

document.getElementById('head').getBoundingClientRect()

浏览器支持性：
这里写图片描述

3、scrollIntoView() 让元素滚动到可视区域

document.getElementById('head').scrollIntoView()

浏览器支持性：
这里写图片描述

partial interface Element {
  DOMRectList getClientRects();
  DOMRect getBoundingClientRect();
  void scrollIntoView();
  void scrollIntoView(boolean top, optional ScrollOptions options);
  ……
};

六、mouse position(鼠标位置)
screenX 和 screenY
pageX 和 pageY
clientX 和 clientY
x 和 y
offsetX 和 offsetY

1、screenX和screenY 鼠标相对屏幕显示器所在的位置

event.screenX;
event.screenY;

浏览器支持性：
这里写图片描述

2、pageX和pageY 鼠标相对文档页面所在的位置对于支持的浏览器，返回的就是由鼠标点击位置决定的数值，对于不支持的浏览器，得到的是undefined

event.pageX;
event.pageY;

浏览器支持性：
这里写图片描述

3、clientX和clientY 鼠标相对于窗口的左上偏移值

event.clientX;
event.clientY;

浏览器支持性：
这里写图片描述

4、x 和 y 鼠标相对于文档的左上偏移值

event.x;
event.y;

浏览器支持性：
这里写图片描述

5、offsetX 和 offsetY 鼠标相对于当前被点击元素的左上偏移值在IE7以及以下浏览器下，只有当当前目标元素为offsetParent时才计算坐标值，否则，它就会拿当前目标元素的offsetParent来计算，当发现元素应用了position: relative后，IE会去寻找下一个offsetParent来计算offsetY，但又不是offsetX

event.offsetX;
event.offsetY;

浏览器支持性：
这里写图片描述

partial interface MouseEvent {
  readonly attribute double screenX;
  readonly attribute double screenY;
  readonly attribute double pageX;
  readonly attribute double pageY;
  readonly attribute double clientX;
  readonly attribute double clientY;
  readonly attribute double x;
  readonly attribute double y;
  readonly attribute double offsetX;
  readonly attribute double offsetY;
};

参考文献： http://www.w3.org/TR/2013/WD-cssom-view-20131217/
http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

shadow_yn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Object Model View整理

一、window view properties(窗口属性) innerWidth 和 innerHeight outerWidth 和 outerHeight pageXOffset 和 pageYOffset screenX 和 screenY1、innerWidth、innerHeight window内部的宽度和高度，不包括菜单栏、工具栏以及滚动条等的
复制链接

扫一扫

专栏目录