Question

我正在使用jQuery的this syntax来创建新元素并直接添加属性。这项工作一般很好。但是我无法以适当的方式添加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属性。或者您需要为style属性指定一个字符串作为参数而不是对象。除了像.css()函数这样的专用函数外，jQuery不会将对象解析为字符串。

指定：与

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>

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

4 个答案: