元素偏移量offset
offset就是偏移量，使用offset的相关属性可以动态地得到该元素的位置（即偏移），大小等
offset系列属性
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素左侧的偏移
element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回的值不带单位
element.offsetHeight 返回自身包括padding、边框、内容区的高度，返回的值不带单位
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin: 150px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: yellow;
margin-left: 45px;
}
.w {
height: 200px;
background-color: skyblue;
margin: 0 auto 200px;
padding: 10px;
border: 15px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<div class="w">
</div>
<script>
//先得到元素
var father = document.querySelector('.father')
var son = document.querySelector('.son')
// 得到元素的偏移位置，返回的值不带单位
//如果没有父元素，或者父盒子没有定位的时候，返回的值相对于body
console.log(son.offsetTop)
console.log(son.offsetLeft)
// 150
// 195
// 父盒子有定位的时候，返回的值相对于父盒子
// 0
// 45
</script>
<script>
//先得到元素
var w = document.querySelector('.w')
//得到元素的大小：宽度和高度；包含padding+border+width/height。值不带单位
console.log(w.offsetWidth)
console.log(w.offsetHeight)
</script>
offset和style的区别
offset
- 可以得到任意样式表中的样式值（行内/类）
- 获取的数值是没有单位的
- offsetWidth包含padding、border、width
- offsetWidth等属性是只读属性，只能获取不能赋值
- 所以我们要获取元素大小位置，用offset更合适
style
- 只能得到行内样式表中的样式值
- style.width获得的是带有单位的字符串
- 获取不包含padding和border的值
- 是可读写属性，可以获取也可以赋值
- 所以我们要给元素改值，用style更合适
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
.box1 {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
}
</style>
</head>
<body>
<div class="box" style="width:300px"></div>
<script>
var box = document.querySelector('.box')
console.log(box.offsetWidth) //320
console.log(box.style.width) //300px
</script>
<div class="box1"></div>
<script>
var box1 = document.querySelector('.box1')
console.log(box1.offsetWidth) //220
console.log(box1.style.width) // 空值
</script>
<script>
// box.offsetWidth = 400 不生效
box.style.width = '400px'
console.log(box.style.width) //生效 400px
console.log(box.offsetWidth) //420
</script>
案例：获取鼠标在盒子内的坐标
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 我们在盒子内点击，想要得到鼠标距离盒子左右的距离
// 首先得到鼠标在页面中的坐标 e.pageX e.pageY
//其次得到盒子在页面中的距离 box.offsetLeft box.offsetTop
//用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
var box = document.querySelector('.box')
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'X坐标是' + x + 'Y坐标是' + y
})
</script>
元素可视区client系列
client就是客户端，使用client的相关属性获取元素可视区的相关信息，通过client的相关属性可以动态地得到该元素的边框大小，元素大小
client相关属性
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框
element.clientHeight 返回自身包括padding、内容区的高度，不含边框
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div')
console.log(div.clientTop) //10
console.log(div.clientLeft) //10
console.log(div.clientWidth) //220
console.log(div.clientHeight) //220
</script>
元素滚动scroll系列
scroll就是滚动，使用scroll的属性可以动态地得到该元素的大小，以及滚动的距离
scroll相关属性
element.scrollTop 返回被卷去的上侧距离，返回值不带单位
element.scrollLeft 返回被卷去的左侧距离，返回值不带单位
element.scrollWidth 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight 返回自身实际的高度，不含边框，返回数值不带单位
//当内容很少的时候，scrollWidth和scrollHeight大小和盒子一样
页面被卷去的头部
如果浏览器的高度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，就是页面被卷去的头部。
滚动条在滚动时触发onscroll事件
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border: 10px solid red;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div>
我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
我是内容 我是内容 我是内容 我是内容 我是内容
</div>
<script>
var div = document.querySelector('div')
console.log(div.scrollWidth)
console.log(div.scrollHeight)
// scroll滚动事件 滚动条发生变化会触发的事件
div.addEventListener('scroll', function (e) {
console.log(div.scrollTop)
})
</script>
案例：拖动的模态框
<script>
//点击弹出层，会弹出模态框，并且显示灰色半透明的遮罩层
var loginEle = document.querySelector('#login')
var mask = document.querySelector('.login-bg')
var linkEle = document.querySelector('#link')
linkEle.addEventListener('click', function (e) {
loginEle.style.display = 'block'
mask.style.display = 'block'
})
//点击关闭按钮，可以关闭模态框，并且关闭灰色半透明的遮罩层
var classBtn = document.querySelector('.close-login')
closeBtn.addEventListener('click', function (e) {
loginEle.style.display = 'none'
mask.style.display = 'none'
})
//鼠标放在模态框最上面一行
//鼠标按下，获取鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - loginEke.offsetLeft
var y = e.pageY - loginEke.offsetTop
//鼠标移动，鼠标的坐标-鼠标在盒子内的坐标，就是模态框的left和top的值
document.addEventListener('mousemove', move)
function move(e) {
loginEle.style.left = e.pageX - x + 'px'
loginEle.style.top = e.pageY - y + 'px'
}
// 鼠标松开，移除移动事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>
在页面中拖拽的原理：
鼠标按下并且移动，之后松开鼠标
鼠标按下mousedown 鼠标移动mousemove 鼠标松开mouseup
拖拽：鼠标移动的过程中，获得最新的值，赋值给模态框的left和top值
鼠标按下触发的事件源，是最上面一行 id = 'title'
鼠标的坐标 - 鼠标在盒子内的坐标就是模态框真正的位置
鼠标按下 得到鼠标在盒子内的坐标
鼠标移动 设置模态框的设置 鼠标的坐标 - 鼠标在盒子内的坐标
鼠标松开 停止拖拽，让移动事件解除