如何在添加到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>

边框返回空字符串。如何获取边框值？

- BalaKrishnan웃

Answer 1

如果不将其插入到 DOM 中，就无法完成它，但是我想到了一个小技巧，那就是将其作为隐藏元素插入到 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.

- The Alpha

---

这个怎么样？它有一个父元素，但是父元素没有被添加到DOM中？ - BalaKrishnan웃

不确定你在尝试什么，但我认为你知道它的原因，因为你在示例中创建了它，无论如何，这只是一个想法。 - The Alpha

谢谢，我找到了。只需克隆那个 div 并将其附加到 body 即可。 - BalaKrishnan웃

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

- Maddy

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

- lukas.pukenis