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同样不会冒泡

基本网页特效（一）