Wie erhalten Sie die css-Eigenschaften, bevor Sie dom hinzufügen?

Question

ich einen Code wie diese haben, ist dies ein Beispiel-Code,

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

die Grenze leere Zeichenkette zurückgibt. Wie bekomme ich den Grenzwert?

Answer 1

Sie kann es, ohne es Einsetzen in die DOM getan, aber hier ist ein Trick, den ich mir vorstellen kann, und es ist, dass Fügen Sie es als versteckt in Dom ein, rufen Sie die Eigenschaft css ab und entfernen Sie sie.

$(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

Sie könnten eine versteckte Eingabe einfügen, mit der Klasse, erhalten Sie die CSS-Eigenschaften und die sie verwenden.

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

Dann, nachdem das Element angehängt wird, können Sie nur die Elemente Mutter Breite erhalten und dann die Eingabe in dieser Breite minus die Menge an Polsterung .. Wie so

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

Alternativ gibt es eine CSS einzige Lösung, aber es funktioniert nicht in IE7 und unter

$('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

Rendern Sie Ihr Element unsichtbar. So etwas wie dieses:

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