文章目录
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})`
}