DOM|DOM - getComputedStyle不为人知的黑科技 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)
--告辞--
【DOM|DOM - getComputedStyle不为人知的黑科技】--END--