元素偏移量offset
使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
- 获得元素距离带有定位父元素的位置
- 获得元素自身的大小（宽度高度）
- 返回的数值都不带单位
<script>
// offset 系列
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1.可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
</script>
结果演示
offset与style区别
offset
- 可以得到任意样式表中的样式值
- 只能获取，不能更改
style
- 只能得到行内样式表中的样式值
- 既能获取又能更改值
鼠标坐标案例
<script>
var b=document.querySelector('.box');
b.addEventListener('mousemove',function(e){
var x= e.pageX-this.offsetLeft;
var y= e.pageY-this.offsetTop;
this.innerHTML='x坐标'+x+' y坐标'+ y;
})
</script>
结果演示
模态框拖拽案例
分析：
- 点击弹出层，模态框和遮挡层就会显示出来display:block;
- 点击关闭按钮，模态框和遮挡框就会隐藏起来display:none;
- 页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
- 触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup
- 拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就好似跟着鼠标走了
- 鼠标按下去的坐标 减去 这个鼠标在盒子内的坐标，等于模态框的真正位置。
- 鼠标按下：得到鼠标在盒子的坐标
- 鼠标移动：让模态框的坐标设置为：鼠标坐标 减去 盒子坐标即可
- 鼠标松开：就停止拖拽，即解除鼠标移动事件
<script>
// 1. 获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
// 2. 点击弹出层这个链接 link 让mask 和login 显示出来
link.addEventListener('click', function() {
mask.style.display = 'block';
login.style.display = 'block';
})
// 3. 点击 closeBtn 就隐藏 mask 和 login
closeBtn.addEventListener('click', function() {
mask.style.display = 'none';
login.style.display = 'none';
})
// 4. 开始拖拽
// (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
// (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
document.addEventListener('mousemove', move)
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
// (3) 鼠标弹起，就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move);
})
})
</script>
结果演示
元素可视区client
用来获取元素的边框大小、元素大小等
立即执行函数
(funnction() {} )() //不需要调用，立马就能自己执行的函数
作用：创建一个独立的作用域
写法：
- (function() {} ) ();
- (function() {} () );
<script>
(function(a){
console.log(a); //结果1
})(1); //第二个小括号可以看作是调用函数
</script>
元素滚动scroll
可以动态的得到元素的实际大小、滚动距离等。
scroll也是滚动事件
注意：
元素内容被卷去（遮盖住）的头部是element.scrollTop
如果是整个页面被卷去的头部则是window.pageYOffset
测试
<script>
// scroll 系列
var div = document.querySelector('div');
console.log(div.scrollHeight);
console.log(div.clientHeight);
// scroll滚动事件当我们滚动条发生变化会触发的事件
div.addEventListener('scroll', function() {
console.log(div.scrollTop);
})
</script>
结果演示
侧边栏案例
<script>
//1. 获取元素
var sliderbar = document.querySelector('.slider-bar');
var banner = document.querySelector('.banner');
// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
var bannerTop = banner.offsetTop
// 当我们侧边栏固定定位之后应该变化的数值
var sliderbarTop = sliderbar.offsetTop - bannerTop;
// 获取main 主体元素
var main = document.querySelector('.main');
var goBack = document.querySelector('.goBack');
var mainTop = main.offsetTop;
// 2. 页面滚动事件 scroll
document.addEventListener('scroll', function() {
// console.log(11);
// window.pageYOffset 页面被卷去的头部
// console.log(window.pageYOffset);
// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
if (window.pageYOffset >= bannerTop) {
sliderbar.style.position = 'fixed';
sliderbar.style.top = sliderbarTop + 'px';
} else {
sliderbar.style.position = 'absolute';
sliderbar.style.top = '300px';
}
// 4. 当我们页面滚动到main盒子，就显示 goback模块
if (window.pageYOffset >= mainTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
</script>
结果演示
三大系列总结
- offset系列经常用于获得元素位置 offsetLeft offsetTop
- client系列经常用于获取元素大小 lientWidth clientHeight
- scroll系列经常用于获取滚动的距离 scrollTop scrollLeft
