ios, safari10 the following error attempted to assign to readonly property

As shown in FIG Error:

code show as below

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

For the above code, safari10 will complain, thereattempted to assign to readonly property

This error is a webkit kernel bug in ios

Solution: do not operate direct style, but set the style properties

code show as below:

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

Reproduced in: https: //juejin.im/post/5cef9848f265da1b7c60fd1c