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`);
复制代码

转载于:https://juejin.im/post/5cef9848f265da1b7c60fd1c