jquery - Get CSS property value of an element on a page from a URL of the same origin -

i background color of element resides @ external page, in same domain. have working solution first approach, there must better way , hope might point me in right direction.

my approach

i decided first load external page iframe:

var $page = $('<iframe/>').attr('src', 'http://mydomain.com/page'); 

then append iframe current page:

$('#iframe-placeholder').append($page); 

and access css property:

$('iframe').load(function(){   var backgroundcolor = $(this).contents().find('#my-element').css('backgroundcolor'); }); 

downsides of approach

1. it's slow
2. it's asynchronous
3. it doesn't works. returns transparent.

question

is there way css property of external page?
need call synchronous , loading whole page iframe (if that's solution) overkill.

any suggestions appreciated...

have tried loading page contents asynchronously , working there?

var backgroundcolor; $.ajax({     type: 'get',     url: 'http://mydomain.com/page',     datatype: 'html',     success: function(pagedata) {         var page = $(pagedata);         backgroundcolor = page.find('#my-element').css('backgroundcolor');     } }); 

do note untested code.