JavaScript DOM 9 - 元素的尺寸与位置

1: 获得页面上某个元素在视口坐标系的位置和元素的尺寸：

element.getBoundingClientRect():{    left:8top:104right:1432bottom: 158width:1424height:54
}

以上方法返回一个对象，包含六个元素，分别是此元素左上角和右下角的坐标，以及元素的宽和高。但是在原始的IE中并不返回width和height, 不过可以自己通过坐标计算出来。
值得注意的是getBoundingClientRect()不是实时的，在调用此函数后，用户再滚动或者改变浏览器窗口大小，它返回的值并不会更新。

针对所有的文档元素，它们都定义了三组变量跟尺寸和位置有关：

1: 包含border的尺寸

offsetWidth//返回包含border在内的宽度
offsetHeight//返回包含border在内的高度
offsetTop//元素与其offsetParent之间的垂直距离
offsetLeft//元素与其offsetParent之间的水平距离
offsetParent//

2: 不包含border的尺寸

clientWidth//返回不包含border在内的宽度
clientHeight//返回不包含border在内的高度
clientLeft//
clientTop//

3: 元素的滚动条

scrollWidth//对于可滚动的元素（overflow:scroll）的元素，返回元素内容的宽度
scrollHeight//对于可滚动的元素（overflow:scroll）的元素，返回元素内容的高度
scrollLeft//对于可滚动的元素（overflow:scroll）的元素，返回/设置元素的滚动条向右边滚动的px
scrollTop//overflow:scroll）的元素，返回/设置元素的滚动条向下边滚动的px

JavaScript DOM 9 - 元素的尺寸与位置相关推荐

《web开发： JavaScript DOM获取元素》
一.JavaScript DOM获取元素 1. 如何获取页面元素 DOM在我们实际开发中主要用来操作元素获取页面中的元素可以使用以下几种方式: (下面的方法都是Web APIs) 根据 ID 获 ...
DOM初探（17）——查看元素的尺寸与位置
四:DOM基本操作: 查看元素的尺寸: dom.offsetWidth,dom.offsetHeight(视觉上的宽高,不可能包含margin) 查看元素的位置: dom.offsetLeft,dom ...
JavaScript DOM获取元素
API 和Web API 1.API API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件 ...
javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
在学习offset的相关属性前,必须明确指出offsetHeight/Width.offsetTop/offsetLeft等返回的都是只读的并且以数字的形式返回像素值(例如,返回12,而不是'12px ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
目录一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容三.jQuery对元素操作 1.遍历元素 2.创建 ...
前端屏幕尺寸和分辨率_web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
Web APIs-事件流、事件委托、其他事件、元素尺寸与位置
目录事件流事件捕获事件冒泡阻止冒泡解绑事件事件委托其他事件 1.页面加载事件 2. 页面滚动事件 3.页面尺寸事件元素尺寸与位置今日单词综合案例事件流事件完整执行过程中的流动路 ...
二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...

JavaScript DOM 9 - 元素的尺寸与位置

JavaScript DOM 9 - 元素的尺寸与位置相关推荐

最新文章

热门文章