使用jQuery创建新元素并立即设置样式

Question

我正在使用jQuery的这种语法来创建新元素并直接添加属性。 这项工作总体上还不错。 但是我无法以适当的方式添加style属性。

例如，这可以正常工作：

$container.append($("<div />", {class: 'some-class'}));

我已经尝试添加style属性，就像处理data属性一样。 但这根本不起作用。

$container.append($("<div />", {
    class: 'some-class',
    style: {
        width: 100,
        background: '#f00'
    }
}));

有什么方法可以使用这种语法在创建新元素时直接设置style ？

Answer 1

只需将style更改为css ：

 $('body').append($("<div />", { class: 'some-class', css: { width: 100, height: 100, background: '#f00' } })); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

您可以使用.css()函数来设置或更改Style属性。 或者，您需要给样式属性一个字符串作为参数而不是一个对象。 jQuery不会将对象解析为字符串，除非使用.css()函数之类的专用函数。

指定：用

var $container = $('body');
$container.append($("<div/>", {
    class: 'some-class',
    css: {
        'width': '100',
        'background': '#f00'
    }
}));

您可以在以您的对象作为参数的元素创建时调用css函数。 同

var $container = $('body');
$container.append($("<div/>", {
    class: 'some-class',
    style: 'width:100px;background:#f00;'
    }
}));

您将使用单个字符串初始化style属性。 由于Style是元素的属性而不是函数，因此无法将对象作为参数处理

Answer 3

你可以这样添加

$( "body" ).add( "div" ).css( "background-color", "red" );

Answer 4

 var $container = $('body'); $container.append($("<div/>", { class: 'some-class', css: { 'width': '100', 'height':'100', 'background': '#f00' } })); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>