day55

JS盒模型 *********

1、width | height

• parseInt(getComputedStyle(ele, null).getPropertyValue('width'))
• parseInt(getComputedStyle(ele, null).getPropertyValue('height'))

2、padding + width | padding + height

• clientWidth
• clientHeight

3、border + padding + width | border + padding + height

• offsetWidth
• offsetHeight

4、结合绝对定位，距离最近定位父级的Top | Left

• offsetTop
• offsetLeft

JS动画

一、JS结合CSS实现动画

1、通过事件修改指定的样式，形成过渡的第二状态

<style>
    #div {
        width: 200px;
        height: 200px;
        background: red;
        transition: .2s;
    }
</style>
<div id="div"></div>
<script>
    div.onclick = function() {
        this.style.width = '400px';
    }
</script>

2、通过事件修改指定的类名，形成过渡的第二状态

<style>
    .div {
        width: 200px;
        height: 200px;
        background: red; 
        transition: .2s;
    }
    .div.active {
        transform: scale(1.2);
    }
</style>
<div id="div" class="div"></div>
<script>
    div.onclick = function() {
        var t_name = "active"
        var c_name = this.className;
        if (!c_name.match(t_name)) {
            this.className += " " + t_name;
        } else {
            this.className = c_name.replace(" " + t_name, "");
        }
    }
</script>

二、JS通过定时器实现动画

• 轮播图