(共566篇)
全部分类

连续操作元素样式的案例
[ 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
<style>
    div {
        width: 100px;
        height: 100px;
        background-color: rgb(74, 194, 154);
        transition: all 0.5s linear;
        position: fixed;
        left: 10px;
        top: 10px;
    }
</style>
<div></div>
<script>
    window.onload = function() {
        var div = document.querySelector("div");
        setTimeout(function() {
            div.style.left = "100px";
            div.style.backgroundColor = "rgb(194, 162, 74)";
        }, 1000);

        setTimeout(function() {
            div.style.top = "100px";
            div.style.backgroundColor = "rgb(194, 74, 164)";
        }, 2000);

        setTimeout(function() {
            div.style.left = "10px";
            div.style.backgroundColor = "rgb(90, 139, 230)";
        }, 3000);

        setTimeout(function() {
            div.style.top = "10px";
            div.style.backgroundColor = "rgb(74, 194, 154)";
        }, 4000);
    };
</script>

案例源码