关于偏移量

偏移量有:offsetLeft、offsetTop、offsetHeight、offsetWidth


offsetWidth

  offsetWidth以像素px计量, 包含元素border+padding+width部分,不包含margin部分

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width; 

offsetHeight

  offsetHeight以像素px计量, 包含元素border+padding+height部分,不包含margin部分

offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

[注意]如果存在垂直滚动条,offsetWidth也包括垂直滚动条的宽度;如果存在水平滚动条,offsetHeight也包括水平滚动条的高度


offsetTop

  offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离


offsetLeft

  offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离


注意事项

  【1】所有偏移量属性都是只读的

  【2】如果给元素设置了display:none,则它的偏移量属性都为0

  【3】每次访问偏移量属性都需要重新计算


 

关于偏移参照--定位父级offsetParent

  定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素(如relative,absolute),主要分为下列几种情况 :

  【1】元素自身有fixed定位,offsetParent的结果为null

  【2】元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为<body>

  【3】元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

  【4】<body>元素的parentNode是null


猜你喜欢

转载自www.cnblogs.com/fumo/p/9263213.html