js盒子模型属性JS盒模型：通过JS中的属性和方法获取元素的属性信息scroll系列scrollLeft(横向滚动条卷去

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      /* css盒子模型属性： context (内容宽高) + padding + border + margin*/
      /*w3c盒模型：内容宽高是不包含padding和border的*/
      /*IE盒模型：宽度包含padding和border*/
      width: 300px;
      height: 1220px;
      background-color: red;
      padding: 50px;
      border: 20px solid blue;
      margin: 50px auto;
      overflow-y: scroll;
    }
  </style>
</head>
<body>
<div class="box" id="box">
    你好好好好好好好好
</div>
<script src="js/4-js盒子模型属性.js"></script>
</body>
</html>

JS盒模型：通过JS中的属性和方法获取元素的属性信息

let box = document.getElementById('box');


client


clientWidth / clientHeight
clientWidth 内容宽度 + 左右padding
clientHeight 内容高度 + 上下padding


console.log(box.clientWidth);
    console.log(box.clientHeight);


clientLeft / clientTop
clientLeft 左边框
clientTop 上边框


console.log(box.clientLeft);
console.log(box.clientTop);


offsetWidth / offsetHeight
offsetWidth = clientWidth(内容宽+左右padding) + 左右边框
offsetHeight = clientHeight(内容高+上下padding) + 上下边框


console.log(box.offsetWidth);
console.log(box.offsetHeight);

scroll系列 scrollLeft(横向滚动条卷去的距离) / scrollTop(纵向滚动条卷去的距离) 滚动条卷去的距离，默认是0，具体是多少要看滚动条滚动了多少

获取浏览器的窗口滚动的距离

let sc = document.documentElement.scrollTop || document.body.scrollTop;
console.log(sc);

scrollHeight/scrollWidth 没有溢出时，scrollHeight/scrollWidth 等于 clientHeight/clientWidth 内容溢出时：scrollHeight = clientHeight + 溢出内容高度; 内容溢出时：scrollWidth= clientWidth + 溢出内容高度;

获取浏览器的窗口的盒模型属性：

let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;

function win(attr, val) {
  if (typeof val !== "undefined") {
    document.documentElement[attr] = document.body[attr] = val;
  }
  return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));

四、offsetLeft和offsetTop 偏移值

offsetLeft / offsetTop

let outer = document.getElementById('outer');
let inner = document.getElementById('inner');
let center = document.getElementById('center');

console.log(inner.offsetParent); // div#outer
console.log(center.offsetLeft);

父级参照物：距离当前元素最近的有定位属性的父级元素，如果没有的话默认body；一般我们需要的是某个元素距离body的offsetLeft，所以就需要一级一级的向上查找

function offset(ele) {
  let left = ele.offsetLeft;
  let top = ele.offsetTop;
  let parent = ele.offsetParent;
  // 只要找到的父级参照物存在且该参照物不是body就一直向上查找（一直找到body为止
  while (parent && parent.nodeName.toLowerCase() !== 'body') {
    left += parent.offsetLeft + parent.clientLeft;
    top += parent.offsetTop + parent.clientTop;
    parent = parent.offsetParent;
  }
  return {
    left,
    top
  }
}
console.log(offset(center));