ios,safari10如下 報錯attempted to assign to readonly property

如圖所示錯誤：

代碼以下

let childNode = document.createElement('span');
childNode.style = "width: 20px;height: 20px;border-radius: 10px;background: #FB7299;color: #FFFFFF;display: inline-block;position: absolute;font-size: 14px;font-family: PingFangSC-Regular;line-height:20px;";
childNode.style.top = e.offsetY - 10 + 'px';
childNode.style.left = e.offsetX - 10 + 'px';
複製代碼

對於以上代碼，safari10會報錯，出現attempted to assign to readonly property

這個報錯是一個 ios中webkit內核的bug

解決方案：不去直接操做style，而是設置style屬性

代碼以下：

childNode.setAttribute('style', `width: 20px;height: 20px;border-radius: 10px;background: #FB7299;color: #FFFFFF;display: inline-block;position: absolute;font-size: 14px;font-family: PingFangSC-Regular;line-height:20px;top:${e.offsetY - 10}px;left:${e.offsetX - 10}px`);
複製代碼