欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js 三大家族之offset

程序员文章站 2022-05-25 18:21:50
JS中的offset家族:一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽高 2.获取到的值是一个number类型,不带单位 3.获取的宽高包含border和padding 4.只... ......
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取最近的那个父级元素。