offset系列
offset概述
offset.png
offset与style的区别
offset与style的区别.png
演示
HTML：
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
CSS：
<style>
* {
margin: 0;
padding: 0;
}
.father {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
margin: 150px;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-left: 45px;
}
.w {
height: 200px;
background-color: skyblue;
margin: 0 auto 200px;
padding: 10px;
border: 15px solid red;
}
</style>
image.png
- 元素偏移offset：可以得到元素的偏移位置，返回不带单位的数值
var father = document.querySelector('.father');
console.log(father.offsetTop); // 150
console.log(father.offsetLeft); // 150
如果有定位的父元素，则以定位父元素为准
如果没有定位的父元素，则以body为准
var son = document.querySelector('.son');
console.log(son.offsetTop); // 0
console.log(son.offsetLeft); // 45
- 获取元素大小：返回的值是元素固有的宽度或高度加上padding和border的值
var w = document.querySelector('.w');
console.log(w.offsetWidth); // style 中并没有设定 width 值，所以会根据其在屏幕中显示的大小来输出值
console.log((w.offsetHeight)); // 250 = 200 + (10 + 15)*2
- 返回当前元素的父元素：
console.log(son.offsetParent); // 返回带有定位的父元素，否则直接返回body
console.log(son.parentNode); // 直接返回父元素
得到鼠标在盒子中的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 得到鼠标在盒子中的距离
var box = document.querySelector('.box');
box.addEventListener('mousemove',function(e){
// console.log(e.pageX);
var x = e.pageX - this.offsetLeft; // 鼠标离文档左边界的距离 - div盒子离文档左边界的距离
var y = e.pageY - this.offsetTop; // 同上
// console.log(x);
// console.log(y);
this.innerHTML = 'index_X: ' + x + ' index_Y: ' + y;
});
</script>
</body>
</html>
client系列
元素可视区client系列
client直译为客户端，使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等等
元素可视区client.png
client属性
client.png
// client 宽度 和我们offsetWidth 最大的区别就是 不包含边框
var div = document.querySelector('div');
console.log(div.clientWidth);
立即执行函数
- 传统函数的声明与调用：不调用不执行：
function fn() {
console.log(1);
}
fn();
- 立即执行函数：不需要调用，立马能够自己执行的函数：
( function() {} )();
也可以这样写：
( function(){}() );
可以传递参数进来：
(function (a, b) {
console.log(a + b);
var num = 10;
})(1, 2); // 第二个小括号可以看做是调用函数
或者：
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部变量
}(2, 3));
立即执行函数最大的作用就是 独立创建了一个作用域, 里面所有的变量都是局部变量 不会有命名冲突的情况
现在分析以下立即执行函数
(function flexible(window, document) {
var docEl = document.documentElement // 获取的html 的根元素
var dpr = window.devicePixelRatio || 1 // dpr 物理像素比
// adjust body font size 设置我们body 的字体大小
function setBodyFontSize() {
// 如果页面中有body 这个元素 就设置body的字体大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
// 的字体大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 设置我们html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我们重新加载页面触发的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
scroll系列
scroll直译过来为滚动的，使用scroll系列的相关属性可以动态得到该元素的大小、滚动距离等
scroll.png
scroll属性.png
HTML：
<div class="box">
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
This is a very long para...
</div>
image.png
scrollHeight 与 clientHeight 异同：
- 都是只包含 width 和 padding ，不包含 border 和 margin
- scrollHeight 包含盒子中内容的长度，clientHeight 仅包含元素可视区的长度
var div = document.querySelector('.box');
console.log(div.scrollHeight); // 332
console.log(div.clientHeight); // 220
scroll 滚动事件：当滚动条发生变化时，会触发事件
div.addEventListener('scroll', function(){
console.log(div.scrollTop); // 返回被卷起的上侧距离
})
三大系列总结
三大系列总结1.png
它们的主要用法：
- offset系列：常用于获得元素位置：offsetLeft 、offsetTop
- client系列：常用于获取元素大小：clientWidth、clientHeight
- scroll系列：常用于获取滚动距离：scrollTop、scrollLeft、
- 注意页面滚动的距离通过window.pageXOffset获得
mouseover与mouseenter的区别
当鼠标移动到元素上就会触发mouseenter事件
类似于mouseover，它们之间的区别是：
- mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。而mouseenter只会经过自身盒子触发
- 之所以这样，是因为mouseenter不会冒泡
- 跟mouseenter搭配使用的mouseleave同样不会冒泡
