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

Tengo un código como este, este es un código de ejemplo,¿Cómo obtener las propiedades CSS antes de agregar a dom?

<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?

Fuente

2012-09-28 BalaKrishnan웃

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.

Fuente

2012-09-28 10:44:44

¿Qué tal esto. tiene un padre, el padre no se agrega a dom? –

No estoy seguro de lo que está intentando, pero creo que sabe lo que tiene porque lo está creando en su ejemplo, de todos modos, es solo una idea. –

gracias, encontré esto, solo tome una copia de ese div y añádalo al cuerpo. –

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; 
}

Fuente

2012-09-28 10:32:47 Maddy

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

Fuente

2012-09-28 10:45:47

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

Respuesta

Cuestiones relacionadas