Создание элемента со свойствами, используя объект-литерал

Question

Начиная с версии 1.4 jQuery;вы смогли создать элемент, используя литерал объекта, определяя свойства элементов ...

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class"
});

Вдобавок к назначению нескольких свойств элементу;Я хотел бы добавить несколько встроенных стилей.Возможно ли это, используя литерал объекта? ... Я что-то наподобие:

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class",
    style: {
        width: "100px",
        height: "100px",
        background-color: "#fff"
    }
});

Answer 1

Вы можете передавать имена методов и аргументы на карту, которая будет выполняться на объекте.

$("<div />",
{
    id: "test",
    name: "test",
    class: "test-class",
    css: {
        width: "100px",
        height: "100px",
        backgroundColor: "#fff"
    }
});

Из документации :

Кроме того, может быть передан любой тип события, и могут быть вызваны следующие методы jQuery: val, css , html, текст, данные, ширина, высота или смещение.

Answer 2

Другое решение (в отдельном ответе, чтобы можно было голосовать за любое из моих решений отдельно или отдельно), это просто добавить вызов к .css() впоследствии:

$('<div>',
{
    id: 'test',
    name: 'test',
    class: 'test-class'
}).css(
{
    width: '100px',
    height: '100px',
    backgroundColor: '#fff'
});

Answer 3

Вместо style используйте css, например:

$("<div />", {
    id: "test",
    name: "test",
    "class": "test-class", //patrick's right, IE specifically doesn't like class
    css: {
        width: "100px",
        height: "100px",
        "background-color": "#fff"
    }
});

Вы можете попробовать здесь , также обратите внимание, что background-color (так как он имееттире) должен быть в кавычках или быть backgroundColor.Другие специальные свойства отображаются таким образом, val, css, html, text, data, width, height и offset обрабатываются здесь специально .

Answer 4

Вы всегда можете написать свой собственный вспомогательный метод, который позволит вам

$('<div>',
{
    id: 'test',
    name: 'test',
    class: 'test-class',
    style: $.objectToCss(
    {
        width: '100px',
        height: '100px',
        background-color: '#fff'
    })
}

полностью непроверенная версия такого вспомогательного метода может выглядеть примерно так:

$.objectToCss = function(obj) {
    var css;
    $.each(obj, function(name, value) {
        css += name + ': ' + value + ';';
    });
    return css;
};