How to get the css properties before adding to dom?

Question

I have a code like this, this is an example code,

<style>
    .divStyle
    {
        border: 2px solid gray;
    }
</style>
<script>
    $(document).ready(function () {
        var div = $("<div class='divStyle'></div>");
        var border = div.css("border");
    });
</script>

the border returns empty string. how to get the border value ?

Answer 1

You cant get it done without inserting it to the DOM but here is a trick I can think of and it's that insert it into dom as hidden, get the css property and remove it.

$(document).ready(function () {
    var div = $("<div class='divStyle'></div>").css('display','none').appendTo('body');
    var border = div.css('border');
    div.remove();
    alert(border);
});

DEMO.