查看元素的几何尺寸
domEle.getBoundingClientRect()
在获取的dom元素上,有一个getBoundingClientRect方法,这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置(width、height、top、left、right、bottom),注意这里的宽高是指除去了margin的盒子模型的宽高。
但是老版本的IE浏览器没有实现width和height,那么我们在老版本的IE计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。
还有一点需要注意的是,这里的宽高也不是实时更新的,数据只是一个副本。
我们依然可以封装一个函数,可以返回元素的宽高。
1 Element.getElementOffset() { 2 var objData = this.getBoundingClientRect(); 3 if(objData.width) { 4 return { 5 w: objData.width, 6 h: objData.height 7 } 8 }else { 9 return { 10 w: objData.right - objData.left, 11 h: objData.bottom - objData.top 12 } 13 } 14 } 15
滚动条滚动
让滚动条滚动的方法有三个:scroll、scrollTo、scrollBy。
这三个方法都有两个参数,分别是x值和y值。前两个方法的作用一模一样,都是让滚动条滚动到(x,y)的位置,但是最后一个scrollBy有一些区别,它是让滚动条相对于上一个位置滚动多少距离。
我们可以简单的用这个方法来实现一个自动阅读的功能:
setInterval(function () {
scrollBy(0, 10);
},50);
另一个查看元素尺寸的方法
dom.offsetWidth/dom.offsetHeight
虽然前面有一个ele.getBoundingClientRect()方法,但是由于这个方法名字是在太长了,因此用的并不是非常多,相比较而言,这两个dom元素的属性用的更多一些。
这里获取的宽高值和上面的一样,都是除去margin后的盒子模型的宽高。
查看元素的位置
dom.offsetLeft/dom.offsetTop
这两个值分别是元素距离左侧和上侧的距离,这里的值是相对于有定位的父级而言的,如果没有有定位的父级的话,才是相对于文档的坐标。
那么现在就来了一个问题:如何找到有定位的父级呢?
domEle上面还有一个属性是offsetParent,这个属性可以查看到元素的有定位的父级,如果没有的话就会返回body,而body的offsetParent则是null。
我们利用上面的信息,可以来封装一个函数,求元素的相对于文档的坐标。
1 Element.prototype.getPosition = function (){ 2 if (!this.offsetParent){ 3 return { 4 “w”: this.offsetLeft, 5 “h”: this.offsetTop 6 } 7 } 8 var width = this.offsetLeft, 9 height = this.offsetTop, 10 ele = this.offsetParent; 11 while (ele.offsetParent){ 12 width += this.offsetParent.offsetLeft; 13 height += this.offsetParent.offsetTop; 14 ele = ele.offsetParent; 15 } 16 return { 17 “w”: width, 18 “h”: height 19 } 20 }
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)
那么今天要介绍的关于获取dom元素的尺寸以及滚动条相关的知识就这些哟~