DOM - getComputedStyle不为人知的黑科技

getComputedStyle就是计算dom的style属性的，但是他还有一个很很大的作用

js动态生成节点， 控制起始动画，或者连续修改style的时候， 如果你给他一个动画属性，会发现并没有动画，

？？？

在这个过程中，浏览器会自动取最后一个值，并且修改Dom， 看例子

Node.style.left = '0px'
node.style.left = '100px'

这时候浏览器只会执行一次Dom更新， 那就是最后一个。（低版本的浏览器，比如IE不算在内）

于是style只更新一次， 就会发现， 动画并没有被执行！！
这时候一般的大家都是setTimeout来解决， 可是浏览器无法八门， 优化的时间控制也不一样。 给100ms又太浪费了，这时候代码洁癖的人，就很痛苦。

今天我偶然发现一个一个神器的代码。我们看下下面一行很熟悉的代码
winow.getComputedStyle(Node).styleKey

对，就是他了。

为了方便大家测试，下面有一个js代码，粘贴控制台看效果吧。

{
    var id = "TEST"
    var div = document.createElement('div')

    if(window[id]){
        document.body.removeChild(window[id])
    }
    div.id = id
    div.style.cssText = `width: 20px; height: 20px; border-radius: 50%; background-color: red; position: fixed;z-index:9999; top: 0;    transition: all 1s;`
    document.body.appendChild(div)


    var test = () => {
        div.style.left = "2px"
        if(true){
            //这个属性会强行更新一波DOM
            window.getComputedStyle(div).left
            
            // test
            var animate = () => {
                div.style.left = "100px"
            }
            animate()
        } else {
            window.setTimeout(() => {
                div.style.left = "200px"
            }, 200)
        }
    
    }

    test()
    
}

getComputedStyle兼容IE9+

移动端使用没有问题

---

嗯， 这个会让浏览器计算， 会发生重绘， 所以就， 破坏了优化， 强制更新。

下面这些都是会引起重绘的

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)

--告辞--

--END--