JavaScript CSSOM视图模式

一、获取窗口的宽高

  1. Window视图属性。window.innerWidth:窗口的内部宽度,不包括用户界面元素,比如窗框。window.innerHeight:窗口的内部高度。IE8以下不兼容。
  2. Document文档视图。document.documentElement.clientWidth:浏览器窗口可视宽度。document.documentElement.clientHeight:浏览器窗口可视高度。跟文档相关的,滚动条不属于文档内容(滚动条属于浏览器,属于窗口内容)

二、元素视图属性

  1. 可视区域的宽高。ele.clientWidth:width+padding。ele.clientHeight:height+padding。不包含子元素。
  2. 盒子整体的宽高。ele.offsetWidth:width+padding+border。ele.offsetHeight:height+padding+border。不包含子元素。
  3. 盒子的实际宽高。ele.scrollWidth(自定义滚动条):paddingLeft+width+超出部分。ele.scrollHeight(自定义滚动条):padding+height+超出部分。
  4. 左值和上值。ele.clientLeft:内容区到盒子最左边的距离(实际上是左边框的宽度)。ele.clientTop:内容区到盒子最上边的距离(实际上是上边框的宽度)。ele.offsetParent:最近的定位父级。ele.offsetLeft:获取元素距离最近的定位父级的左边距离。ele.offsetTop:获取元素距离最近的定位父级的上边距离。
  5. 滚动宽,滚动高。ele.scrollLeft:水平滚动条的值。ele.scrollTop:垂直滚动条的值。可读可写,有内容溢出元素才有效果。设置时不能给px 单位,否则会出错。document.documentElement.scrollLeft:文档水平滚动条。document.documentElement.scrollTop:文档垂直滚动条。

三、元素方法

  1. ele.getBoundingClientRect():得到矩形元素的界线,返回的是一个对象,包含 top, left, right, bottom四个属性值,大小都是相对于浏览器窗口top,left 的距离。
  2. ele.scrollIntoView():让元素滚动到可视区域(HTML5标准),参数 true 与浏览器对齐,false元素在窗口居中显示。
  3. e.clientXe.clientY:相对于window,为鼠标相对于浏览器窗口的偏移 。event.clientX鼠标在文档的水平坐标。event.clientY 鼠标在文档的垂直坐标。
document.onmousemove = function (e) {
    console.log(e.clientX,e.clientY)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,588评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,790评论 0 8
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 817评论 0 0
  • 写在前面: Window和document对象的区别 window对象表示浏览器中打开的窗口 window对象是可...
    给堕落一个理由先阅读 704评论 0 3