Wie lassen sich die CSS-Eigenschaften vor dem Hinzufügen zum DOM erhalten?

Question

Ich habe einen Code wie diesen, dies ist ein Beispielscode,

    .divStyle
    {
        border: 2px solid gray;
    }

    $(document).ready(function () {
        var div = $("<div class='divStyle'></div>");
        var border = div.css("border");
    });

der Rand gibt einen leeren String zurück. Wie bekomme ich den Randwert?

Answer 1

Sie können es nicht erledigen, ohne es in das DOM einzufügen, aber hier ist ein Trick, den ich mir vorstellen kann: Fügen Sie es als versteckt in das DOM ein, holen Sie sich die CSS-Eigenschaft und entfernen Sie es.

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

DEMO.

Answer 2

Sie könnten ein verstecktes Eingabefeld einfügen, mit der Klasse, die CSS-Eigenschaften abrufen und sie dann verwenden.

Dann, nachdem das Element angehängt wurde, können Sie einfach die Breite des übergeordneten Elements abrufen und dann die Eingabe auf diese Breite setzen, abzüglich des Padding-Betrags.. So

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

Alternativ gibt es eine reine CSS-Lösung, die jedoch nicht in IE7 und darunter funktioniert

 $('td input').width($(this).parent().width() - [$('#getPadding').css('padding-left') + $('#getPadding').css('padding-right')])
Alternativ gibt es eine reine CSS-Lösung, die jedoch nicht in IE7 und darunter funktioniert

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 das:

 var div = $(""); // Erstellen
     $(body).append(div);  // Rendern
     $(div).hide();  // Sofort verstecken
 var border = $(div).css("border");  // Wert abrufen
    $(div).remove();   // Zerstören