动态加载的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.clientWidth

var bodyH=document.documentElement.clientHeight

var elW=ele[0].offsetWidth

var elH=ele[0].offsetHeight

ele[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方法,应该来说是同步的代码,为何还是获取不到真实的元素宽度?从而导致整个元素无法居中