getComputedStyle就是計算dom的style屬性的复斥，但是他還有一個很很大的作用
js動態(tài)生成節(jié)點， 控制起始動畫目锭，或者連續(xù)修改style的時候， 如果你給他一個動畫屬性侣集，會發(fā)現(xiàn)并沒有動畫，
世分？？臭埋？
在這個過程中，瀏覽器會自動取最后一個值瓢阴，并且修改Dom， 看例子
Node.style.left = '0px'
node.style.left = '100px'
這時候瀏覽器只會執(zhí)行一次Dom更新荣恐， 那就是最后一個。（低版本的瀏覽器叠穆，比如IE不算在內(nèi)）
于是style只更新一次， 就會發(fā)現(xiàn)硼被， 動畫并沒有被執(zhí)行！嚷硫！
這時候一般的大家都是setTimeout來解決始鱼， 可是瀏覽器無法八門脆贵， 優(yōu)化的時間控制也不一樣医清。 給100ms又太浪費了丹禀，這時候代碼潔癖的人鞋怀，就很痛苦双泪。
今天我偶然發(fā)現(xiàn)一個一個神器的代碼密似。我們看下下面一行很熟悉的代碼
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+
移動端使用沒有問題
嗯闺金， 這個會讓瀏覽器計算， 會發(fā)生重繪败匹， 所以就， 破壞了優(yōu)化掀亩， 強制更新。
下面這些都是會引起重繪的
offsetTop槽棍、offsetLeft捉蚤、 offsetWidth炼七、offsetHeight、scrollTop特石、scrollLeft、scrollWidth姆蘸、scrollHeight芙委、 clientTop、clientLeft灌侣、clientWidth、clientHeight侧啼、getComputedStyle() (currentStyle in IE)
--告辭--
--END--
