电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: DOM- offset家族及匀速运动动画六（1） [打印本页]

作者: look_w 时间: 2019-3-3 19:21 标题: DOM- offset家族及匀速运动动画六（1）

offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
offsetWidth和offsetHight（检测盒子自身宽高+padding+border）

offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；

<!DOCTYPE html>
<html>
<head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
         div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid #000;
            margin: 100px;
            background-color: pink;
         }
      </style>
</head>
<body>

      <div class="box"></div>

<script>

      var div = document.getElementsByTagName("div")[0];

      //offsetHeight和offsetWidth: 可以检测盒子的宽高。
      //包括宽高本身，padding，border。不包括margin

      //offsetHeight = height+padding+border;(不加margin)
      //offsetWidth = width+padding+border;(不加margin)

      console.log(div.offsetHeight); 140
      console.log(typeof div.offsetHeight); //number

</script>


</body>
</html>

offsetLeft和offsetTop（检测距离父盒子有定位的左/上面的距离）

返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)

<!DOCTYPE html>
<html>
<head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
         .box1 {
            width: 300px;
            height: 300px;
            padding: 100px;
            margin: 100px;
            position: relative;
            border: 100px solid #000;
            background-color: pink;
         }
         .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            /*position: absolute;*/
            /*left: 10px;*/
            /*top: 10px;*/
         }
      </style>
</head>
<body>
<div class="box1">
      <div class="box3">
         <div class="box2" style="left: 10px"></div>
      </div>
</div>

<script>

      var box2 = document.getElementsByClassName("box2")[0];

      //offsetTop和offsetLeft
      console.log(box2.offsetLeft); //100
      console.log(box2.style.left); //10px



</script>

</body>
</html>

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)