learnDOM

DOM盒子模型

通过DOM盒模型属性获取值的特点
1.获取的都是数字不带单位
2.获取的都是整数，不会出现小数，会进行四舍五入，尤其是获取偏移量
3.获取的结果都是复合样式值(好几个元素的样式组合在一起的值)，如果想要获取单一样式(例如只获取padding)，盒子模型就操作不了了

1.client系列

clientTop
clientLeft
clientWidth
clientHeight

clientWidth/clientHeight

获取当前元素可视区域的宽高(内容的宽高 + 左右/上下的padding),如果有小数，值四舍五入
注意：和内容是否有溢出无关(和是否设置了overflow: hidden也无关)，就是我们自己设定的内容的宽高+padding

应用：获取当前页面一屏幕的宽高(可视区域的宽高)

  document.documentElement.clientWidth || document.body.clientWidth
  document.documentElement.clientHeight || document.body.clientHeight

clientTop/clientLeft

获取上/左边框的宽度

2.offset系列

offsetTop
offsetLeft
offsetWidth
offsetHeight
offsetParent

offsetWidth/offsetHeight

在client基础上加上border

offsetParent

当前盒子的父级参照物

参照物：同一个平面中，元素的父级参照物和结构没有必然联系，默认他们的父级参照物都是body(当前平面最外层的盒子), body的父级参照物是null

参照物可以改变：构建出不同的平面即可(使用zIndex，但是这个属性只对定位有作用)，所以改变元素的定位(position: relative/absolute/fixed)，可以改变其父级参照物

offsetTop/offsetLeft

获取当前盒子距离父级参照物的偏移量(上偏移/左偏移),从当前盒子的外边框开始到父级参照物的内边框

应用：获取当前元素距离body的偏移(上偏移和左偏移),不管父级参照物是谁

  let offset = function (curEle) {
  // 1.获取当前元素本身的左/上偏移
  let curLeft = curEle.offsetLeft,
      curTop = curEle.offsetTop,
      p = curEle.offsetParent;

  // 2.累加父参照物的边框和偏移(一直想上找，找到body为止,每当找到一个父参照物都把它的边框和偏移累加起来，根据元素不一样，具体找几次也不知道) 所以用while循环
  // tagName ：获取当前元素的标签名(大写)

  while (p.tagName !== "BODY") { //=> 当找到的父参照物是body结束查找和累加操作

    // 3.把找到的父参照物的边框和偏移值累加起来
    curLeft += p.clientLeft;
    curLeft += p.offsetLeft;

    curTop += p.clientTop;
    curTop += p.offsetTop;

    p = p.offsetParent; //=> 基于当前找到的父参照物继续向上查找
  }

  return {
    left: curLeft,
    top: curTop
  }
}

3.scroll系列

scrollTop
scrollLeft
scrollWidth
scrollHeight

scrollWidth/scrollHeight

如果没有内容溢出的情况下，等于内容宽高 + padding；如果有内容溢出无overflow: hidden的情况下，等于真实内容的宽高 + 左/上padding(下/右padding被真实内容占了)；如果有内容溢出并且有overflow: hidden的情况下，等于真实内容宽高 + padding。
注意：它是一个约等于的值，因为在不同浏览器显示不同的数值

应用：获取当前页面的真实宽高(包含溢出的部分)

  document.documentElement.scrollWidth || document.body.scrollWidth
  document.documentElement.scrollHeight || document.body.scrollHeight

scollTop/scrollLeft

滚动条卷去的高度

最小卷去值：0

最大卷去值：真实页面高度 - 一屏幕高度document.documentElement.scrollHeight - document.documentElement.clientHeight

在js盒子模型13个属性中，只有scrollTop/scrollLeft是"可读写"属性，其余都是"只读"属性

获取元素具体的某个样式值

1.元素.style.xxx 操作获取

这能获取所有写在元素行内上的样式，不写在行内上，不管你写没写都获取不到，真实项目中我们很少把样式写在行内

2.获取当前元素所有经过浏览器计算的样式

经过计算的样式: 只要当前元素可以在页面中呈现(或者浏览器渲染它了),那么它的样式都是被计算过的
不管当前样式写在哪
不管你是否写了(浏览器会给元素设置一些默认样式)
在标准浏览器中(IE9+)

  // 获取当前元素所有被浏览器计算过的样式(它是一个对象)
  window.getComputedStyle([元素],[伪类,一般都写null])

IE6-8中 : 元素.currentStyle

跑马灯案例

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="marqueeBox">
    <ul class="wrapper">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
    </ul>
  </div>

  <script src="./index.js"></script>
</body>

</html>

/* style.css */
.marqueeBox {
  position: relative;
  margin: 20px auto;
  width: 500px;
  height: 100px;
  border: 1px solid green;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 100px;
}

.wrapper li {
  float: left;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
}

.wrapper li:nth-child(3n+1) {
  background: lightblue;
}

.wrapper li:nth-child(3n+2) {
  background: lightcoral;
}

.wrapper li:nth-child(3n+3) {
  background: lightpink;
}

// index.js
/**
 * 实现js动画
 *   让wrapper每间隔一段时间(最优动画时间是13-17ms)在原有的left值基础上减去步长(想让动画快一些，步长就大一些)
 */

let wrapper = document.querySelector(".wrapper");

// 1.把wrapper中原有的li整体克隆一份放到容器的末尾(无缝滚动)
/*
 方法一：
let wrapperList = wrapper.querySelectorAll("li");
// 创建文档碎片
let frg = document.createDocumentFragment();
[].forEach.call(wrapperList, item => {
  // 深度克隆
  frg.appendChild(item.cloneNode(true));
})

wrapper.appendChild(frg); */

// 方法二: 一句话克隆
wrapper.innerHTML += wrapper.innerHTML;

// 由于克隆了一份li，然后让wrapper的宽度变为原来的二倍
let wrapperWidth = parseFloat(getComputedStyle(wrapper, null).width) * 2;
wrapper.style.width = `${wrapperWidth}px`;


// 基于定时器实现动画
setInterval(() => {
  // 获取当前wrapper的样式值,减去步长，把最新的left赋值给元素即可
  let curL = parseFloat(getComputedStyle(wrapper, null).left);
  curL -= 3; // 步长为3px
  wrapper.style.left = `${curL}px`;
  // console.log(curL);

  /*
  实现无缝方法一，如果left值到-900的时候，也就是wrapper宽度一半的时候，让wrapper立即运动到left为0的位置即可
  if (curL === -900) {
    curL = 0
    wrapper.style.left = `${curL}px`
  } */

  // 实现无缝方法二，当我们的wrapper距离marqueeBox的左偏移已经是整个wrapper一半的宽度，此时，我们让wrapper立即运动到left为0位置即可
  if (-parseFloat(wrapper.offsetLeft) === parseFloat(wrapper.style.width)/2) {
    curL = 0;
    wrapper.style.left = `${curL}px`;
  }

}, 13)

js中的盒子模型-client/offset/scroll