获取计算后的样式/封装变速移动函数

发表于 | 更新于: | 分类于 | | 热度 ℃

重点：

获取计算后函数

1.获取计算后的 css 样式（返回值为 css 的一个对象包含所有的 css 元素）
2.封装兼容代码
兼容：
谷歌,火狐支持
console.log(window.getComputedStyle(dv,null).left);
IE8 支持
console.log(dv.currentStyle.left);

封装变速移动函数

1.理清思路
2.传入元素，对象，函数
3.判断 opacity 和 zindex
4.获取元素位置等数据
5.可以设置移动，大小，透明度，层级
6.配合获取后样式用，未优化

封装代码

获取计算后样式代码

1
2
3
4
5
6
// 判断浏览器是否自持方法，得到css返回值
// 未设置的css样式会返回auto或者0
function getStyle(element, attr) {
    //判断浏览器是否支持这个方法
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

封装变速移动函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 判断浏览器是否自持方法，得到css返回值
function getStyle(element, attr) {
    //判断浏览器是否支持这个方法
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}

// 封装点击事件移动函数
//设置任意的一个元素,移动到指定的目标位置
fn = (element, json, fn1) => {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
        let flag = true; //判断目标到达
        for (const attr in json) {
            //判断这个属性attr中是不是opacity
            if (attr == "opacity") {
                //获取元素的当前的透明度，放大一百倍
                var current = getStyle(element, attr) * 100;
                // 当前属性对应的目标值,放大一百倍
                var target = json[attr] * 100;
                //每次移动的距离
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                current += step;
                element.style[attr] = current / 100;
            } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
                element.style[attr] = json[attr];

            } else {
                //获取元素的当前的位置,数字类型
                var current = parseInt(getStyle(element, attr));
                // 当前属性对应的目标值
                var target = json[attr];
                //每次移动的距离
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                current += step;
                element.style[attr] = current + "px";
            }

            if (current != target) {
                flag = false;
            }
            console.log("测试代码：当前元素" + attr + "当前位置" + current + " 目标值" + target);
        }
        if (flag) {
            //清理定时器
            clearInterval(element.timeId);
            // 所有属性到达目标后才能使用，并且用户有输入函数
            if (fn1) {
                fn1();
            }
        }
    }, 20);
}

小案例代码

获取计算后样式

Css

1
2
3
4
5
6
7
.dv {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 100px;
    background-color: pink;
}

Html

1
2
3
4
<input type="button" value="点击">
<div class="dv">

</div>

Js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let btn = document.querySelector("input");
let dv = document.querySelector(".dv");

// //谷歌,火狐支持
// //console.log(window.getComputedStyle(dv,null).left);
//
// //console.log(window.getComputedStyle(dv,null)["left"]);
// //IE8支持
// //console.log(dv.currentStyle.left);


// 判断浏览器是否自持方法，得到css返回值
// 未设置的css样式会返回auto或者0
function getStyle(element, attr) {
    //判断浏览器是否支持这个方法
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}


btn.onclick = () => {
    console.log(getStyle(dv,"left"));
    console.log(getStyle(dv,"backgroundColor"));
}

封装变速移动小案例

Css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* {
    padding: 0;
    margin: 0;
}

div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: pink;
}
input {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
}

Html

1
2
3
4
<input type="button" value="移动">
<div>

</div>

Js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
let btn = document.querySelector("input");
    let dv = document.querySelector("div");

    // 判断浏览器是否自持方法，得到css返回值
    function getStyle(element, attr) {
        //判断浏览器是否支持这个方法
        return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
    }


    // 封装点击事件移动函数
    //设置任意的一个元素,移动到指定的目标位置
    fn = (element, json, fn1) => {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            let flag = true; //判断目标到达
            for (const attr in json) {
                //判断这个属性attr中是不是opacity
                if (attr == "opacity") {
                    //获取元素的当前的透明度，放大一百倍
                    var current = getStyle(element, attr) * 100;
                    // 当前属性对应的目标值,放大一百倍
                    var target = json[attr] * 100;
                    //每次移动的距离
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                    current += step;
                    element.style[attr] = current / 100;
                } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
                    element.style[attr] = json[attr];

                } else {
                    //获取元素的当前的位置,数字类型
                    var current = parseInt(getStyle(element, attr));
                    // 当前属性对应的目标值
                    var target = json[attr];
                    //每次移动的距离
                    var step = (target - current) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step); //当前移动到位置
                    current += step;
                    element.style[attr] = current + "px";
                }

                if (current != target) {
                    flag = false;
                }
                console.log("测试代码：当前元素" + attr + "当前位置" + current + " 目标值" + target);
            }
            if (flag) {
                //清理定时器
                clearInterval(element.timeId);
                // 所有属性到达目标后才能使用，并且用户有输入函数
                if (fn1) {
                    fn1();
                }
            }
        }, 20);
    }

    btn.onclick = () => {
        let json = {
            width: 800,
            height: 400,
            left: 500,
            top: 600,
            opacity: 0.2
        }
        let json1 = {
            width: 20,
            height: 40,
            left: 0,
            top: 0,
            opacity: 0.8,
            zIndex:1000
        }
        // fn(dv, json)


        // let date1 = {
        //     "width": 800,
        //     "height": 400,
        //     "left": 500,
        //     "top": 600
        // };
        // fn(dv, date1, () => {
        //     let date2 = {
        //         "width": 80,
        //         "height": 40,
        //         "left": 50,
        //         "top": 60
        //     }
        //     fn(dv, date2, () => {
        //         let date3 = {
        //             "width": 400,
        //             "height": 200,
        //             "left": 300,
        //             "top": 100
        //         }
        //         fn(dv, date3)
        //     })
        // });

        fn(dv, json, () => {
            fn(dv,json1)
        })
    }
-------------本文结束感谢您的阅读-------------
0%