8

我有这样的代码，这是一个示例代码，

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

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

4

3 回答 3

3

如果不将其插入到 dom 中就无法完成，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);
});

演示。

于 2012-09-28T10:44:44.623 回答
1

您可以使用类插入隐藏输入，获取 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;
}
于 2012-09-28T10:32:47.187 回答
1

使您的元素不可见。像这样的东西：

 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
于 2012-09-28T10:45:47.680 回答