JS盒子模型

css 盒子模型 : width height border padding margin
js 盒子模型 : client offset scroll

client

clientWidth: 盒子的文本宽度width，+ 左右padding （正常的盒子模型，当在怪异盒模型中clientWidth不能使用这个公式，我们可以理解为盒子的可视区域的宽度）
clientHeight: 盒子的文本高度height，+ 上下padding
clientLeft: 盒子的左border
clientTop: 盒子的上border
内容溢出对client没有任何影响

offset

offsetParent: 上级参照物有定位的父级盒子
offsetWidth: 盒子文本width + 左右padding + 左右border === clientWidth + 左右border ，跟内容溢出没有关系
offsetLeft : 盒子的外边框 到上级参照物 内边框 的距离

scroll

scrollHeight
- 若内容没有溢出时，跟clientHeight一样
- 若内容溢出时，当元素增加 overflow-hidden 属性的话，那么scrollHeight的值：内容 + 上下padding；没有overflow-hidden的属性的话，内容 + 上padding
  -scrollTop 滚动条卷去的内容的高度
  -scrollLeft 滚动条卷去的内容的宽度

1）以上13个属性中，只有scrollTop和scrollLeft 可以设置的属性，其他都是只读属性
2）获取一屏幕的高度： document.documentElement.clientHeight || document.body.clientHeight 对其他浏览器的兼容问题
3）获取整个文档的高度：document.documentElement.scrollHeight || document.body.scrollHeight
4）监听浏览器窗口发生的事件： window.onresize = function (){…}
5）当遇到<table></table>标签时，td 和 th 父级盒子都是table，不再是body
6）改变盒子的css中样式left、transform等属性改变盒子的位置，不会改变offsetLeft的值；只有改变盒子的width margin padding 值的时候，盒子的offsetLeft值才会发生改变

function offset (ele){
   let  left = ele.offsetLeft,
        top = ele.offsetTop,
        parent = ele.offsetParent
  while(parent && parent.nodeName.toUpperCase() != 'BODY'){
      //代码从左向右读取，先判断parent存不存在，在判断parent是否为body
        left += parent.clientleft + parent.offsetLeft
        top += parent.clientTop + parent.offsetTop
        parent = parent.offsetParent
  }
   return {
        left,
        top}
    }
    console.log(offset(inner))

简单的文字循环上下移动,利用setTimeout实现

var timer = null,
    maxH = box.scrollHeight - box.clientHeight
    function run (){
        clearTimeout(timer)//清除定时器
        box.scrollTop++
        (box.scrollTop + 20) >= maxH ? box.scrollTop = 0 : null
        timer = setTimeout(run,10)
    }
    run()

简单的文字循环上下移动,利用setInterval实现

var timer = setInterval(()=>{
     box.scrollTop++ 
    (box.scrollTop + 20) >= (box.scrollHeight - box.clientHeight) ? box.scrollTop = 0 : null 
     },10)

跑马灯案例，通过改变scrollLeft值改变

let ul = document.querySelector('ul'),
    box = document.querySelector('.box')
    //maxL = box.scrollWidth - box.clientWidth //=>理论上是800
    // console.log(maxL)  但是这里输出的是0 
	//这是因为加载img图片是异步事件，是等页面的代码执行完成后
	//再通过图片路径，，加载图片，所以输出为0
    ul.innerHTML += ul.innerHTML
    ul.style.width = '1600px'
    var timer = setInterval(()=>{ 
        box.scrollLeft++
        box.scrollLeft >= 800 ? box.scrollLeft = 0 :null
    },10)
    //另外一种跑马灯思路：通过改变ul的C3的left值，使图片移动
	//能够实现一样的效果，但是这样做会引发多次的DOM回流，降低浏览器性能