动态加载的css导致js控制的元素无法居中

Question

/*a.css的代码*/*{margin:0;padding:0;}.dialog{        width: 380px;        height: auto;        position: absolute;z-index: 9000;        background: #38f;        color:#333;    }/*加载a.css文件*/var cssNode = document.createElement('link');cssNode.rel = 'stylesheet';cssNode.type = 'text/css';cssNode.media = 'screen';cssNode.href = 'a.css?t='+new Date().getTime();document.head.appendChild(cssNode);/*使元素居中*/function gocenter(ele){var bodyW=document.documentElement.clientWidthvar bodyH=document.documentElement.clientHeightvar elW=ele[0].offsetWidthvar elH=ele[0].offsetHeightele[0].style.left=(bodyW-elW)/2+'px'ele[0].style.top=(bodyH-elH)/2+'px'}/*调用代码*/$('body').append('<div class="dialog">测试是否居中</div>')gocenter($('.dialog'))//可以居中setTimeout(function(){gocenter($('.dialog'))},0)问题是:如果直接用gocenter($('.dialog'))的话,元素无法居中,但是只要用了setTimeout就可以居中了.我还发现,如果直接调用gocenter($('.dialog')),那么获取出来的元素offsetWidth的值是屏幕宽度,但我明明已经先append,然后再调用的gocenter方法,应该来说是同步的代码,为何还是获取不到真实的元素宽度?从而导致整个元素无法居中