zoukankan      html  css  js  c++  java
  • JavaScript offset家族

    (1)offsetWith & offsetHeight  用来获取盒子在页面上的实际占有的大小

      obj.style.width只能读取或者写入行内样式,对于非行内样式,它无法设置和读取

      1.obj.offsetWith 宽

        obj.offsetHeight 高

      2.obj.style.width 与 obj.offsetWidth的区别

      obj.style.width属性是字符串,读取出来的数据是带有"px"的(不能直接做加减乘除的运算)

       obj.offsetWidth是数值类型,读出的数据没有"px"(可以直接做加减乘除)

      obj.style.width是可读可写的

       offsetWidth是只读属性,不能修改。

      obj.style.width只能读取或者写入行内样式,对于非行内样式,它无法设置和读取

       offsetWidth可以随时读取当前盒子的宽度,无论是行内样式还是非行内样式

      注意:offsetWidth = width + padding + border

     (2)offsetLeft & offsetTop 盒子与上级盒子的距离

     注意,一定不能使用obj.style.left来计算距离

     obj.style.left,只能读写行内样式

      offsetLeft能读取任何地方设置的样式

     obj.style.left是个字符串,带有“px”后缀

      offsetLeft是数值类型,能直接做算数运算

     offsetLeft是只读的,obj.style.left是可读可写的

     offsetLeft读取的是距离上一级声明了定位方式的盒子的距离,如果没有任何1级父盒子声明了定位方式

      那么offsetLeft读取的就是距离body的距离。如果多个父级盒子都声明了定位方式,那么以最近的那个盒子为准

     offsetLeft读取到的是边框到边框的距离(含有padding

     注意:只有offsetLeft和offsetTop,没有offsetRight和offsetBottom

    (3)offsetParent

    offsetParent获取当前盒子的父级盒子的DOM对象

    跟父级盒子有没有声明定位方式有直接关系。

    如果父级盒子声明了定位方式,那么offsetParent读取到的就是离他最近的那个声明了定位的上级盒子。

    如果所有的上级盒子都没晟敏定位,那么offsetParent读出来的就是body标签对象

    parentNode得到的永远是直接父节点

  • 相关阅读:
    Codeforces 662D International Olympiad【贪心】
    LightOJ 1236 Pairs Forming LCM【整数分解】
    LightOJ 1341 Aladdin and the Flying Carpet【整数分解】
    LightOJ 1370 Bi-shoe and Phi-shoe【欧拉函数 && 质数】
    SGU 106 The equation【扩展欧几里得】
    unity 第三人称控制移动
    unity Animator做简单的人物动画
    unity 背包系统
    unity 针对UI的射线穿透的两种方式
    用角色控制器控制移动和碰撞
  • 原文地址:https://www.cnblogs.com/ldq678/p/10108104.html
Copyright © 2011-2022 走看看