目录
一、问题
1.在已有dom上添加子节点son,并在添加后把son移动到合适的位置。但是发现第一次修改son的样式不生效,打印后竟然发现:获取到的dom高度 clientHeight 第一次竟然是错误的(clientWidth一直正确);导致第一次渲染的位置和之后的渲染都不一样。。。。
2.代码
let setStyle=()=>{
let dom=$('#parent')[0];
let son=`<div>子节点<img :src="${img}"/></div>`;
dom.appendChild(son);
son.setAttribute('style',`position:absolute;top:${300-
dom.clientHeight};left:${300-dom.clientWidth}`)
}
二、原因及解决方法
1.原因:appendChild竟然是一个异步方法。添加async await改成同步的即可。
2.代码
let setStyle=async()=>{
let dom=$('#parent')[0];
let son=`<div>子节点<img :src="${img}"/></div>`;
await dom.appendChild(son);
son.setAttribute('style',`position:absolute;top:${300-
dom.clientHeight};left:${300-dom.clientWidth}`)
}
三、总结
1.真的就很难以置信。当你在写代码时发现有些时候正确,有些时候不正确时,在检查逻辑无误的情况下,需要考虑异步的问题。
2.appendChild竟然是异步的,长见识了!
3.终于解决了,长叹一口气,继续敲代码,节日快乐!
/*
希望对你有帮助!
如有错误,欢迎指正,非常感谢!
*/