¿Cómo obtener las propiedades CSS antes de agregar a dom?

Question

Tengo un código como este, este es un código de ejemplo,

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

la frontera devuelve una cadena vacía. cómo obtener el valor en el borde?

Answer 1

Usted no puede lograr que se haga sin necesidad de insertar a la DOM pero aquí es un truco que se me ocurre y es que insértalo en dom como oculto, obtén la propiedad css y quítala.

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

DEMO.

Answer 2

Puede insertar una entrada oculta, con la clase, obtener las propiedades de CSS y usarlas.

<input id="getPadding" class="inp" type="text" style="display:none" /> 

A continuación, después de que el elemento se añade Puede acaba de obtener el ancho de los elementos de los padres y luego ajustar la entrada a la anchura de menos la cantidad de relleno .. Al igual que

$('td input').width($(this).parent().width() - [$('#getPadding').css('padding-left') + $('#getPadding').css('padding-right')]) 

Por otra parte hay un css única solución, pero no funciona en IE7 y por debajo

$('td input').width($(this).parent().width() - [$('#getPadding').css('padding-left') + $('#getPadding').css('padding-right')]) 
Alternatively there is a css only solution but it does not work in IE7 and below 

td input { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    border: 0px; 
    display: block; 
    padding: 2px 5px; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

Answer 3

Renderiza tu elemento invisible. Algo como esto:

var div = $("<div class='divStyle'></div>"); // Create 
    $(body).append(div); // Render 
    $(div).hide(); // Hide immediately 
var border = $(div).css("border"); // Get value 
    $(div).remove(); // Destroy