js 三大家族之offset

JS中的offset家族:一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 2.获取到的值是一个number类...
JS中的offset家族:

一、offsetWidth与offsetHeight:

获取的是元素的实际宽高 = width + border + padding

注意点:
1.可以获取行内及内嵌的宽高
2.获取到的值是一个number类型,不带单位
3.获取的宽高包含border和padding
4.只能读取,不能设置

console.log ( div.offsetWidth );//width + border + padding
console.log (div.offsetHeight );//height + border + padding

  

二:offsetLeft与offsetTop:

offsetLeft:获取自己左外边框与父级元素的左内边框的距离
offsetTop:获取自己上外边框与父级元素的上内边框的距离

  offsetTop   和 style.top 的区别

  1.最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
  2.offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
  3.offsetTop 只读,而 style.top 可读写。
  4.如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
  5.最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便



三:offsetParent:获取最近的定位父元素 (自己定位参照的父元素)
注意点:
1.如果元素自身是固定定位(fixed),则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位,那么他的定位父级是body
3.body的定位父级是null

offsetParent 和 parentNode的区别:
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。
如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。





  • 发表于 2019-03-29 20:20
  • 阅读 ( 219 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除