Question

如何在添加元素之前获取css属性？

CSS

input.inp {
    padding:3px 2px 3px 2px;
}

JS

var elm = $('<input class="inp" type="text" />');

alert(elm.css('padding-left'));
td.append(elm);
alert(elm.css('padding-left'));

只有第二个警报返回值...

我希望input元素的宽度为：100％..但是因为你不能这样做（当输入有自己的填充时）我需要设置宽度（以像素为单位）

获取必须附加INPUT的TD的宽度...
获取INPUT的左右填充
将INPUT附加到TD，TD的宽度减去INPUT的左右填充

Answer 1

如果它不在DOM中，那么你就不能，AFAIK。

Answer 2

可能是因为填充在样式表中，并且它取决于文档中css应用于元素的位置。因此，当元素不到位时，它还没有那种样式。它必须至少是DOM的一部分，并且（取决于css选择器）DOM中的确切位置也可能很重要。

Answer 3

当你这样做时：

$('<input class="inp" type="text" />');

与做：

相同

var input = document.createElement("input");
input.type = "text";
input.className = "inp";

在这两种情况下，它们都会返回一个Detached元素。

由于该元素尚未附加到DOM但class尚未生效，因此将Css应用于该元素。

因此，当您尝试获取填充时，它将不会被设置。

在将其添加到DOM

之前，您必须添加内联填充才能获取它

$('<input class="inp" type="text" />').css("padding", "5px");

Answer 4

您可以使用类插入隐藏的输入，获取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 {
    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 5

var padbefore = $("elmid").css('padding-left');
alert(padbefore);
$("td").append('elmid');
var paddafter = $("elmid").css('padding-left');
alert(paddafter);

在append（）之前获取css（）属性？

5 个答案: