domに追加する前にCSSのプロパティを取得するには？

Question

私はこのようなコードを持っている、これは境界が空の文字列を返します

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

、サンプルコードです。国境値を取得する方法？

Answer 1

の下にあなたはそれがDOMにそれを挿入せずに行われますが、ここで私は考えることができるトリックであり、それはそれのgetカントDOMに隠しファイルとして挿入し、CSSプロパティを取得して削除します。

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

クラスに隠れた入力を挿入して、CSSのプロパティを取得して使用することができます。要素が追加された後

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

次に、あなただけの要素の親幅を取得することができますし、そのように

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

また、CSSがあると同じように...その幅マイナスパディングの量への入力を設定します唯一の解決策が、それはIE7で動作しないと

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

要素を非表示にします。このようなもの：

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