offset、client、scroll系列

offset系列

offsetWidth

console.log(变量.offsetWidth)
宽度+左右内边距（padding）+左右边框(border)

offsetHeight

console.log(变量.offsetHeight)
宽度+上下内边距（padding）+上下边框(border)

offsetTop、offsetLeft

父元素没有定位

1、console.log(变量.offsetTop)
元素距离上侧浏览器的距离

2、console.log(变量.offsetLeft)
元素距离左侧浏览器的距离

父元素有定位

1、console.log(变量.offsetTop)
元素距离父元素上侧的距离

2、console.log(变量.offsetLeft)
元素距离父元素左侧的距离

client系列

clientWidth

宽度（width）+左右内边距（padding）

clientHeight

宽度（width）+上下内边距（padding）

clientTop

上边框宽度

clientLeft

左边框宽度

scroll系列

scrollWidth

宽度（width）+滚动条滚动的距离

scrollHeight

高度（height）+滚动条滚动的距离

scrollTop

上下滚动条滚动的距离

scrollLeft

左右滚动条滚动的距离

案例

天使跟着鼠标飞

css部分

 * {
        margin: 0;
        padding: 0;
    }

    #img {
    /* 图片设置相对定位*/
        position: relative;
    }

html部分

 <img id="img" src="./images/tianshi.gif" alt="">

js部分

//获取元素
 var img = document.getElementById('img')
    document.onmousemove = function (event) {
        var event = event || window.event
        //图片距离上部距离，clientY触发点距离浏览器上侧的距离，img.clientHeight / 2 图片高度的一半
        img.style.top = event.clientY - img.clientHeight / 2 + 'px'
        //图片距离左部距离，clientX 触发点距离浏览器左侧的距离，img.clientWidth / 2 图片宽度的一半
        img.style.left = event.clientX - img.clientWidth / 2 + 'px'
    }

小球跟着鼠标跑

效果图（ps:鼠标截取不到）

css部分

 div {
            width: 50px;
            height: 50px；
            border-radius: 50%;
            position: absolute;
            display: none;
        }

html部分

<div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

js部分

var arr = document.getElementsByTagName('div');
	//鼠标移动事件
    document.onmousemove = function (event) {
    //event内置对象
        var event = event || window.event
        // console.log(event.clientX);
        // console.log(event.clientY);
        var i = 0
        //定时器
        var timer = setInterval(function () {
        //遍历每一个小球
            if (i < arr.length) {
            	//显示盒子
                arr[i].style.display = 'block'
                //背景颜色，调用随机颜色函数
                arr[i].style.backgroundColor = color(256, 0)
                //小球距离上侧距离，clientY触发点距离浏览器上侧的距离
                arr[i].style.top = event.clientY - arr[i].clientHeight / 2 + 'px'
                //小球距离左侧距离clientX 触发点距离浏览器左侧的距离
                arr[i].style.left = event.clientX - arr[i].clientWidth / 2 + 'px'
                i++
            } else {
            //清除定时器
                clearInterval(timer)
            }
        }, 200)
    }
    //随机颜色函数
    function color(max, min) {
        var r = Math.floor(Math.random() * (max - min) + min)
        var g = Math.floor(Math.random() * (max - min) + min)
        var b = Math.floor(Math.random() * (max - min) + min)
        return `rgb(${r},${g},${b})`
    }