項目中遇到的奇怪問題,已定位緣由。Attempted to assign to readonly property報錯dom
原由:項目中寫了個點擊事件,增長動態效果,相似於轉一轉,rotate(360)。很簡單的一個特效。
設置元素的transition:transform 1s。 而後動態改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試,真機測試都OK。可是提測後,在測試的IOS10下的safari,居然沒有生效。測試
定位緣由: 一開始覺得是transform沒有加上前綴。但確認後排除。因而真機鏈接代理測試,在點擊事件中alert彈窗,發現並無執行。因而確認有報錯。try catch後彈出錯誤。代理
Attempted to assign to readonly property
查閱資料得知,是safari內核bug。網上有解決方案,不要使用嚴格模式,即刪除'use strict'。
(沒有驗證,由於以爲不可行,因小失大)code
解決方案。 猜想是由於Style不能夠直接change,但應該能夠設置Style.transform。測試可行,但這樣設置多個屬性的時候,並不優雅,可換成class。 不過由於rotate角度涉及到計算,故而本人並無採用設置class的方案。orm
錯誤: dom.style = `transform: rotate(${x}deg)`; 正確 dom.style.transfrom = 'rotate(${x}deg)';