zoukankan      html  css  js  c++  java
  • JS学习

    JS学习 - offset家族(一)

    先来张图开开胃

    • offsetWidth offetHeight

      • 得到对象的宽度和高度(自己的,与他人无关)
      • offsetWidth = width + border + padding
      • div {220px; border-left:2px solid red; padding:10px;} div.offsetWidth = 220 + 2 + 20;
    • offsetLeft offsetTop

      • 返回距离上级盒子(最近的带有定位的盒子)左边的位置
      • 如果父级都没有定位则以body为准 这里的父级指的是所有的上一级,不仅仅指的是父亲级别,还可以是爷爷级别或者更高级别
      • offsetLeft从父级的padding开始算,父亲的border不算 '盒子到定位的父盒子,边框到边框的距离'
    • offsetParent

      • 返回该对象的父级('带有定位的父级,这里的父级包括父亲级别或者更高级别'), 请自觉区别parentNode('返回的是父亲级别')
      • 如果当前元素的父级元素没有进行CSS定位(postion为absolute或relative),offsetParent为body
      • 如果当前元素的父级元素中有CSS定位(postion为absolute或relative),offsetParent取最近的那个父级元素

    重点 - offsetWidth,offetHeight,offsetLeft,offsetTop 与 style.width,style.height,style.left,style.top 的区别

    这里拿offsetTop 和 style.top作比较

    • 1.最大的区别在于offsetTop可以返回没有定位的盒子距离顶部的位置,而style.top不可以,只要定位的盒子,才有left top right bottom
    • 2.offsetTop返回的是数字,而style.top返回的是字符串,除了数字外还带有单位:px
    • 3.offsetTop 只读,而style.top可读写
      • 如果没有给HTML元素指定过top样式,则style.top返回的是空字符串
      • style.top只能得到行内样式;offsetTop没有限制
  • 相关阅读:
    8月4日
    8月3日 hive配置
    8月2日
    8月1日
    7月31日
    7月30日
    7月29日
    7月28日
    第六周总结
    重大技术需求进度报告一
  • 原文地址:https://www.cnblogs.com/gchlcc/p/6669200.html
Copyright © 2011-2022 走看看