offset系列
offset概述
offset.png
offset與style的區(qū)別
offset與style的區(qū)別.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：可以得到元素的偏移位置，返回不帶單位的數(shù)值
var father = document.querySelector('.father');
console.log(father.offsetTop); // 150
console.log(father.offsetLeft); // 150
如果有定位的父元素朴沿，則以定位父元素為準(zhǔn)
如果沒(méi)有定位的父元素猜谚，則以body為準(zhǔn)
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 中并沒(méi)有設(shè)定 width 值赌渣，所以會(huì)根據(jù)其在屏幕中顯示的大小來(lái)輸出值
console.log((w.offsetHeight)); // 250 = 200 + (10 + 15)*2
- 返回當(dāng)前元素的父元素：
console.log(son.offsetParent); // 返回帶有定位的父元素魏铅，否則直接返回body
console.log(son.parentNode); // 直接返回父元素
得到鼠標(biāo)在盒子中的距離
<!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 rel="stylesheet">
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 得到鼠標(biāo)在盒子中的距離
var box = document.querySelector('.box');
box.addEventListener('mousemove',function(e){
// console.log(e.pageX);
var x = e.pageX - this.offsetLeft; // 鼠標(biāo)離文檔左邊界的距離 - 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系列
元素可視區(qū)client系列
client直譯為客戶端，使用client系列的相關(guān)屬性來(lái)獲取元素可視區(qū)的相關(guān)信息坚芜。通過(guò)client系列的相關(guān)屬性可以動(dòng)態(tài)的得到該元素的邊框大小览芳、元素大小等等
元素可視區(qū)client.png
client屬性
client.png
// client 寬度 和我們offsetWidth 最大的區(qū)別就是 不包含邊框
var div = document.querySelector('div');
console.log(div.clientWidth);
立即執(zhí)行函數(shù)
- 傳統(tǒng)函數(shù)的聲明與調(diào)用：不調(diào)用不執(zhí)行：
function fn() {
console.log(1);
}
fn();
- 立即執(zhí)行函數(shù)：不需要調(diào)用，立馬能夠自己執(zhí)行的函數(shù)：
( function() {} )();
也可以這樣寫(xiě)：
( function(){}() );
可以傳遞參數(shù)進(jìn)來(lái)：
(function (a, b) {
console.log(a + b);
var num = 10;
})(1, 2); // 第二個(gè)小括號(hào)可以看做是調(diào)用函數(shù)
或者：
(function sum(a, b) {
console.log(a + b);
var num = 10; // 局部變量
}(2, 3));
立即執(zhí)行函數(shù)最大的作用就是 獨(dú)立創(chuàng)建了一個(gè)作用域, 里面所有的變量都是局部變量 不會(huì)有命名沖突的情況
現(xiàn)在分析以下立即執(zhí)行函數(shù)
(function flexible(window, document) {
var docEl = document.documentElement // 獲取的html 的根元素
var dpr = window.devicePixelRatio || 1 // dpr 物理像素比
// adjust body font size 設(shè)置我們body 的字體大小
function setBodyFontSize() {
// 如果頁(yè)面中有body 這個(gè)元素 就設(shè)置body的字體大小
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
} else {
// 如果頁(yè)面中沒(méi)有body 這個(gè)元素鸿竖，則等著 我們頁(yè)面主要的DOM元素加載完畢再去設(shè)置body
// 的字體大小
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10 設(shè)置我們html 元素的文字大小
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize 當(dāng)我們頁(yè)面尺寸大小發(fā)生變化的時(shí)候沧竟，要重新設(shè)置下rem 的大小
window.addEventListener('resize', setRemUnit)
// pageshow 是我們重新加載頁(yè)面觸發(fā)的事件
window.addEventListener('pageshow', function(e) {
// e.persisted 返回的是true 就是說(shuō)如果這個(gè)頁(yè)面是從緩存取過(guò)來(lái)的頁(yè)面，也需要從新計(jì)算一下rem 的大小
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports 有些移動(dòng)端的瀏覽器不支持0.5像素的寫(xiě)法
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直譯過(guò)來(lái)為滾動(dòng)的缚忧，使用scroll系列的相關(guān)屬性可以動(dòng)態(tài)得到該元素的大小悟泵、滾動(dòng)距離等
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 包含盒子中內(nèi)容的長(zhǎng)度搔谴，clientHeight 僅包含元素可視區(qū)的長(zhǎng)度
var div = document.querySelector('.box');
console.log(div.scrollHeight); // 332
console.log(div.clientHeight); // 220
scroll 滾動(dòng)事件：當(dāng)滾動(dòng)條發(fā)生變化時(shí)魁袜，會(huì)觸發(fā)事件
div.addEventListener('scroll', function(){
console.log(div.scrollTop); // 返回被卷起的上側(cè)距離
})
三大系列總結(jié)
三大系列總結(jié)1.png
它們的主要用法：
- offset系列：常用于獲得元素位置：offsetLeft 、offsetTop
- client系列：常用于獲取元素大卸氐凇：clientWidth峰弹、clientHeight
- scroll系列：常用于獲取滾動(dòng)距離：scrollTop、scrollLeft芜果、
- 注意頁(yè)面滾動(dòng)的距離通過(guò)window.pageXOffset獲得
mouseover與mouseenter的區(qū)別
當(dāng)鼠標(biāo)移動(dòng)到元素上就會(huì)觸發(fā)mouseenter事件
類似于mouseover鞠呈，它們之間的區(qū)別是：
- mouseover 鼠標(biāo)經(jīng)過(guò)自身盒子會(huì)觸發(fā)，經(jīng)過(guò)子盒子還會(huì)觸發(fā)右钾。而mouseenter只會(huì)經(jīng)過(guò)自身盒子觸發(fā)
- 之所以這樣蚁吝，是因?yàn)閙ouseenter不會(huì)冒泡
- 跟mouseenter搭配使用的mouseleave同樣不會(huì)冒泡
