全回顾扫盲js之获取元素宽高

获取元素宽高总结起来大致有三种方式:

  • 1.dom.style
  • 2.currentStyle/getComputedStyle
  • 3.getBoundingClientReact

一、dom.style.height 获取最终应用在元素上的所有CSS属性,对象可读可写,获取的值含有'px'

二、currentStyle/getComputedStyle涉及到兼容性问题,其中currentStyle在ie下生效,getComputedStyle兼容到ie9,为了处理这个兼容性问题,这么做

(dom.currentStyle ? dom.currentStyle : getComputedStyle(dom, null)).width

getComputedStyle有两个参数,第一个参数dom不用说,第二个参数,是写伪类的,例如getComputedStyle(dom, ':after')).width,如果不是伪类的话,getComputedStyle(dom)).width也是可行的,但是在早起版本会有问题,如果没有要设置为null,网上查到的是Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,这个方法只是获得属性,但不能写入

三、getBoundingClientReact也是一个只读不写的的方法,用来获取元素与屏幕之间的关系,结果是一个json:{top: 237.5, right: 510.5, bottom: 397.5, left: 90.5, width: 420…},里面有width和height。

  • 1.三个方法比较,只有第一个有读写双重功能,另外两个都只能读,而且第一个方法不存在兼容性问题。但缺点是局限性比较大,只能读取行内样式。
  • 2.第二个方法使用比较方便,但缺点是存在兼容性问题,必须要做兼容,而且只读不写。
  • 3.第三个方法也是只读不写,优点是使用方便,跟第二个方法比较,不需要做兼容性,但是缺点是,可以读取的属性远没有方法二多。属性对比图在下面。
  • 4.获得值也不一样,前两个获得的是带有'px'的值,第三个方法没有

随机浏览