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--
